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


90

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.


Hala Stack Overflow üzerindeyseniz, yanıtı güncellemeyi düşünür müsünüz?
mikemaccana

Yanıtlar:


118

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; }

5
<div> etiketini <figure> ile değiştirebilirsiniz: anlamsal ekler ve gerekirse bunun için bir başlık (<figcaption>) verebilirsiniz. developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
Mateus Leon

Ayrıca, marka kullanımı içinse, web sitesi sunumunda <h1> (dizin ise) veya <p> (diğer ise) kullanın, başlık ve alt nitelikleri <img> 'e uygulayarak SEO dostu işaretleme ekleyebilirsiniz . Div gibi blok seviyesi öğeleridirler ve kırpma işlevselliğiniz için sarmalayıcılar olabilirler.
Mateus Leon

3
Cletus'un bir web geliştiricisi olduğunu bilmiyordum. Amazing
Piyin


28

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.)


4
-1 verenler lütfen diğer kullanıcıların yararına açıklamalıdır. Şahsen, bunu iOS'ta IE6 ve Safari'de bile mükemmel sonuçlarla yaptım.
SamGoody

Sadece eklemek istedim - bu genellikle iyi bir yaklaşımdır. İnsanlar, optimizasyon olarak görüntü hareketli grafik sayfaları için arka plan konumu koordinatlarını bile belirler. Ancak bir fark, <img> 'nin sahip olduğu hata olay işleyicisine sahip olmamasıdır
badunk

Ben de bu içeriği ile div için bir sınıf ekledi:background-repeat:no-repeat !important; float:left; width:100px; height:100px;
Nils

2
Bazı tarayıcılar varsayılan olarak arka plan resimlerini yazdırmaz, bu nedenle kullanıcıların o sayfayı yazdırmasına izin vermek istiyorsanız bu iyi bir yaklaşım olmayabilir.
Bennett McElwee

5
Bu anlamsal olarak doğru değil. Bu yararlıysa, HTML5, figcaption, resim ile anlambilimini optimize etmek için neden resimle ilgili daha fazla etiket yerleştiriyor? İmg etiketini tasarlandığı gibi kullanın ve her şeyi <div> ile değiştirmeyi bırakın.
Mateus Leon

24

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/


2
1+ Bu gerçekten harika. Sınırlı destek olması çok kötü . Görünüşe göre Chrome 32, sağlayıcı önekleri olmadan onu ilk destekleyen kişi.
Josh Crozier

Bu harika, bir cazibe gibi çalışıyor. Sadece tek bir özellik eklemek her şeyi düzeltti. Sadece Chrome'a ​​ihtiyacım vardı ve çalışıyor. Ve evet, satıcı öneki olmadan. Teşekkürler.
whyAto8

10
#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;
}

7

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


3

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" />


1

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.



0

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.


0

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%;
    }
}

-1

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;
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.