Bir görüntünün genişliğini ve yüksekliğini uzatmadan nasıl ayarlanır?

Sahip olursam:

#logo {
    width: 400px;
    height: 200px;
}

sonra

<img id="logo" src="logo.jpg"/>

bu alanı doldurmak için uzayacaktır. Görüntünün aynı boyutta kalmasını ama DOM'da bu kadar yer kaplamasını istiyorum. Kapsülleyici <div>veya eklemeli miyim <span>? Stil için işaret eklemekten nefret ediyorum.

Evet, kapsayıcı bir div'e ihtiyacınız var:

<div id="logo"><img src="logo.jpg"></div>

gibi bir şeyle:

#logo { height: 100px; width: 200px; overflow: hidden; }

Diğer çözümler (dolgu, kenar boşluğu) daha sıkıcıdır (çünkü görüntünün boyutlarına göre doğru değeri hesaplamanız gerekir), ancak aynı zamanda kabın görüntüden daha küçük olmasına etkin bir şekilde izin vermez.

Ayrıca, yukarıdakiler farklı düzenler için çok daha kolay adapte edilebilir. Örneğin, sağ alttaki resmi istiyorsanız:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

2017 cevabı

CSS nesne sığdırma mevcut tüm tarayıcılarda çalışır. imgGörüntüyü uzatmadan elemanın daha büyük olmasını sağlar .

CSS'nize ekleyebilirsiniz object-fit: cover;.

Görüntüyü bir div için arka plan olarak yükleyin.

Onun yerine:

<img id='logo' src='picture.jpg'>

yapmak

<div id='logo' style='background:url(picture.jpg)'></div>

Tüm tarayıcılar görüntünün sığmayan kısmını kırpacaktır.
Bunun, taşması gizli bir öğeyi sarmalamaya göre birkaç avantajı vardır:

1. Ekstra işaret yok. Div, img'nin yerini alır.
2. Görüntüyü kolayca ortalayın veya başka bir ofsete ayarlayın. Örneğin.url(pic) center top;
3. Yeterince küçük olduğunda görüntüyü tekrarlayın. (Tamam, neden bunu isteyeceğini bilmiyorum)
4. Aynı ifadede bir bg rengi ayarlayın, aynı görüntüyü birden çok öğeye ve bg görüntüleri için geçerli olan her şeyi kolayca uygulayın.

Güncelleme: Bu cevap nesne uydurmadan öncedir; şimdi muhtemelen object-fit / object-position kullanmalısınız.

Ekstra özellikler (arka plan tekrarı gibi) ve uç durumlar için eski tarayıcılar için hala yararlıdır (Örneğin, flexbox ve nesne konumu ile geçici Chrome hataları ve grid + autoheight + nesne ile FF (eski?) Sorunları Izgara / esnek kutudaki sarmalayıcı div'ler genellikle ... sezgisel olmayan sonuçlar verir.)

CSS3 nesne uyumu

Webkit, IE ve firefox tarafından ne kadar uygulandığından emin değilim. Ama Opera sihir gibi çalışıyor

object-fitSVG içeriğiyle çalışır, ancak aynı etki preserveAspectRatio=""özelliği SVG'nin kendisinde ayarlayarak da elde edilebilir .

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Chris Mills demo burada http://dev.opera.com/articles/view/css3-object-fit-object-position/

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

Bir div yapın ve ona bir sınıf verin. Ardından içine bir resim bırakın.

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

Div'inizin boyutunu ayarlayın ve göreceli hale getirin.

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

sonra imajınızı şekillendirin

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

umarım yardımcı olur

Aşağıdaki gibi kullanabilirsiniz:

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

Kapsüllü bir <div> veya <span> eklemem gerekiyor mu?

Bence yaparsın. Akla gelen tek şey dolgu ama bunun için görüntünün boyutlarını önceden bilmeniz gerekir.

yükseklik / genişlik yerine dolguyu ayarlamayı deneyebilirsiniz.

Düşünebildiğim şey, genişliği veya yüksekliği uzatmak ve oran-en boy oranında yeniden boyutlandırmasına izin vermek. Yanlarda biraz beyaz boşluk olacak. Geniş ekranın 1024x768 çözünürlüğü nasıl görüntülediği gibi bir şey.

Flexbox kullanmak sizin için geçerli bir seçenekse (eski tarayıcıları desteklemenize gerek yok), buradaki diğer cevabımı kontrol edin (muhtemelen bunun bir kopyasıdır):

Temel olarak, img etiketinizi bir div içine sarmalamanız gerekir ve css'niz şöyle görünür:

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

Bu oldukça eski bir soru, ancak Chrome / Edge için her şeyin iyi çalıştığı aynı can sıkıcı sorunu yaşadım (nesne uydurma özelliği ile), ancak aynı css özelliği IE11'de çalışmadı (IE11'de desteklenmediğinden beri), sona erdi tüm sorunlarımı çözen HTML5 "figür" öğesini kullanarak.

Ben şahsen dış DIV etiketini kullanmadım çünkü bu benim durumumda hiç yardımcı olmadı, bu yüzden dış DIV'den kaçındım ve basitçe 'şekil' elemanıyla değiştirdim.

Aşağıdaki kod, görüntüyü güzel bir şekilde küçültmeye / küçültmeye zorlar (orijinal en boy oranını değiştirmeden).

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

ve css sınıfları:

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}