Orantılı tutarken bir div'i resimle nasıl doldurabilirim?

Bu konuyu buldum - Resmin en boy oranını korurken bir resmi <div> 'i dolduracak şekilde nasıl uzatırsınız? - bu tamamen istediğim şey değil.

Belli büyüklükte bir div'im ve içinde bir resim var. Görüntünün yatay veya dikey olmasına bakılmaksızın, div'i her zaman görüntüyle doldurmak istiyorum . Ve görüntünün kesilmiş olması da önemli değildir (div'in kendisinde gizli taşma vardır).

Görüntü portre Yani eğer istediğim widtholmak 100%ve height:autobunun orantılı olarak kalması. Görüntü manzara ise istediğim heightolmaya 100%ve width to beauto`. Karmaşık görünüyor değil mi?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

Bunu nasıl yapacağımı bilmediğim için ne demek istediğime dair hızlı bir görsel oluşturdum. Hatta tam olarak tarif edemiyorum.

Yani, sanırım bunu soran ilk kişi ben değilim. Ancak buna gerçekten bir çözüm bulamadım. Belki bunu yapmanın yeni bir CSS3 yolu vardır - flex-box'ı düşünüyorum. Herhangi bir fikir? Belki de beklediğimden daha kolaydır?

Ne istediğinizi doğru anlarsam, en boy oranını korumak için genişlik ve yükseklik özelliklerini görüntünün dışında bırakabilir ve merkezlemeyi sizin için yapmak için flexbox'ı kullanabilirsiniz.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle burada

Bunu IE9, Chrome 31 ve Opera 18'de başarıyla test ettim. Ancak başka hiçbir tarayıcı test edilmedi. Her zaman olduğu gibi, özel destek gereksinimlerinizi dikkate almalısınız.

Biraz geç ama aynı sorunu yaşadım ve sonunda başka bir stackoverflow gönderisinin yardımıyla çözdüm ( https://stackoverflow.com/a/29103071 ).

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

Umarım bu hala birilerine yardımcı olur.

Ps: Ayrıca max-height , max-width , min-width ve min-height css özellikleriyle birlikte çalışır. Kabı veya tüm tarayıcı penceresini doldurmak için % 100 veya 100vh / 100vw gibi uzunluk birimleri kullanmak özellikle kullanışlıdır .

Eski bir soru ama şimdi bir yolu olduğu için güncellemeyi hak ediyor.

Doğru CSS tabanlı cevabı kullanımına olduğunu object-fit: covergibi çalışır, background-size: cover. Konumlandırma object-position, varsayılan olarak merkezleme olan özniteliğe göre halledilir .

Ancak herhangi bir IE / Edge tarayıcıda veya Android <4.4.4'te desteklenmemektedir. Ayrıca object-positionSafari, iOS veya OSX tarafından desteklenmemektedir. Polyfill'ler var, nesneye uygun resimler en iyi desteği veriyor gibi görünüyor.

Mülkün nasıl çalıştığı hakkında daha fazla ayrıntı için, açıklama ve demo için CSS Püf Noktaları makalesine bakınobject-fit .

Bunu yapmalı:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

Aşağıdaki tüm yanıtların genişliği ve yüksekliği sabittir, bu da çözümü "yanıt vermez" kılar.

Sonucu elde etmek ancak görüntüyü duyarlı tutmak için aşağıdakileri kullandım:

1. Konteynerin içine istenen oranda şeffaf bir gif görüntüsü yerleştirin
2. Yeniden boyutlandırmak ve kırpmak istediğiniz görüntüyle bir görüntü etiketi satır içi css arka planı verin

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

Bunu css flex özelliklerini kullanarak başarabilirsiniz. Lütfen aşağıdaki koda bakın

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

background-size: cover(IE9 +) ile birlikte kullanmayı düşünün background-image. IE8- için bir polyfill vardır .

Bunu dene:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

Bu yardımcı olur umarım

Bunu başarmak için div kullanabilirsiniz. img etiketi olmadan :) bunun yardımcı olacağını umuyoruz.

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}

<div class="img">	
</div>
<div class="img1">	
</div>

Açıklanan "en iyi durum" senaryosuna ulaşmamın tek yolu, resmi arka plan olarak koymaktı:

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

İşte IE'yi destekleyen bir cevap, object-fitböylece oranı kaybetmezsiniz

Basit JS olmadığını algılamak için snippet'ine kullanma object-fityerine daha sonra desteklenir ve imgbir içinsvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

Not: İşe yarayacak birkaç object-fitpolyfill de var object-fit.

İşte birkaç örnek:

• Nesne-fit-images
• constancecchen / nesne-sığdırma
• CSS nesne sığdırma özelliği için Polyfill

İşte benim çalışma örneğim var. Görüntüyü arka plan boyutunda div kapsayıcısının arka planı olarak ayarlayan bir numara kullandım: kapak ve arka plan konumu: merkez merkez

Resmi genişlik:% 100 ve opaklık: 0 görünmez hale getirerek yerleştirdim. Resmimi yalnızca alt tıklama olayını aramakla özel ilgim olduğu için gösterdiğimi unutmayın.

Lütfen açısal kullansam da bunun tamamen alakasız olduğuna dikkat edin.

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

Sonuç, her durumda optimal olarak tanımladığınız sonuçtur

CSS object-fit: coverve object-position: left centerözellik değerleri artık bu sorunu ele almaktadır.

Sadece resmin yüksekliğini düzeltin ve genişlik = otomatik sağlayın

img{
    height: 95vh;
    width: auto;
}