Görüntüyü sınırlayıcı kutuya sığacak şekilde ölçekleme

Bir görüntüyü sınırlayıcı kutuya ölçeklemek için (en boy oranını koruyarak) yalnızca css'e yönelik bir çözüm var mı? Bu, görüntü konteynerden daha büyükse işe yarar:

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

Misal:

• Kullanım durumu 1 (çalışır): http://jsfiddle.net/Jp5AQ/2/
• Kullanım örneği 2 (çalışır): http://jsfiddle.net/Jp5AQ/3/

Ancak, bir boyut kabın% 100'ü olana kadar görüntüyü ölçeklendirmek istiyorum.

• Kullanım durumu 3 (çalışmaz): http://jsfiddle.net/Jp5AQ/4/

Not: Kabul edilen cevap bu olsa da, aşağıdaki cevap daha doğrudur ve bir arka plan resmi kullanma seçeneğiniz varsa şu anda tüm tarayıcılarda desteklenmektedir.

Hayır, bunu her iki yönde yapmanın tek yolu CSS yoktur. Ekleyebilirsin

.fillwidth {
    min-width: 100%;
    height: auto;
}

Bir öğenin her zaman% 100 genişliğe sahip olması ve yüksekliği otomatik olarak en boy oranına veya tersine ölçeklendirmesi için :

.fillheight {
    min-height: 100%; 
    width: auto;
}

her zaman maksimum yüksekliğe ve göreceli genişliğe ölçeklemek için. Her ikisini de yapmak için, en boy oranının kapsayıcısından yüksek mi yoksa düşük mü olduğunu belirlemeniz gerekir ve CSS bunu yapamaz.

Bunun nedeni, CSS'nin sayfanın neye benzediğini bilmemesidir. Kuralları önceden belirler, ancak ancak ondan sonra öğeler işlenir ve hangi boyut ve oranlarla uğraştığınızı tam olarak bilirsiniz. Bunu tespit etmenin tek yolu JavaScript kullanmaktır.

Bir JS çözümü aramıyor olmanıza rağmen, birisinin ihtiyaç duyması durumunda yine de ekleyeceğim. Bunu JavaScript ile halletmenin en kolay yolu, oran farkına göre bir sınıf eklemektir. Kutunun genişlik-yükseklik oranı görüntünün oranından daha büyükse, "dolgu genişliği" sınıfını, aksi takdirde "dolgu yüksekliği" sınıfını ekleyin.

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>

CSS3 sayesinde bir çözüm var!

Çözelti olarak görüntüyü koymaktır background-imageve ardından ayarlamak background-sizeiçin contain.

HTML

<div class='bounding-box'>
</div>

CSS

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

Burada test edin: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

En son tarayıcılarla tam uyumluluk: http://caniuse.com/background-img-opts

Div'i merkeze hizalamak için şu varyasyonu kullanabilirsiniz:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

İşte keşfettiğim bilgisayar korsanlığı çözümü:

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

Bu, görüntüyü on kat büyütür, ancak son boyutunun% 10'u ile sınırlar - böylece onu kapsayıcıyla sınırlar.

background-imageÇözümün aksine , bu aynı zamanda <video>öğelerle de çalışacaktır .

Etkileşimli örnek:

 function step(timestamp) {
     var container = document.getElementById('container');
     timestamp /= 1000;
     container.style.left   = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
     container.style.top    = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
     container.style.width  = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
     container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
     window.requestAnimationFrame(step);
 }

 window.requestAnimationFrame(step);

 #container {
     outline: 1px solid black;
     position: relative;
     background-color: red;
 }
 #image {
     display: block;
     max-width: 10%;
     max-height: 10%;
     transform-origin: 0 0;
     transform: scale(10);
 }

<div id="container">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>

Bugün sadece nesne uyumu: kapsama deyin. Destek, IE dışında her şeydir: http://caniuse.com/#feat=object-fit

html:

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

css:

.container{
  width: 100px;
  height: 100px;
}


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

Bunu hem dikey hem de yatay olarak uzun görüntüler için aynı anda saf CSS ve eksiksiz tarayıcı desteğiyle gerçekleştirebilirsiniz.

Chrome, Firefox ve Safari'de (hem kullanarak hem de kullanmadan) çalışan bir pasajı burada bulabilirsiniz object-fit: scale-down:

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}

Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

Arka plan görüntüsü olmayan ve bir konteynere ihtiyaç duyulmayan başka bir çözüm (sınırlayıcı kutunun maksimum boyutları bilinmelidir):

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

Bunun için şuna benzer bir şeye sahip olacaksınız:

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>

Bu örnek, görüntüyü orantılı olarak tüm pencereye sığacak şekilde uzatır. Yukarıdaki doğru koda bir doğaçlama eklemek,$( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

İki if koşulu vardır. Birincisi, görüntü yüksekliğinin div'den daha az olup olmadığını kontrol etmeye devam .fillheighteder ve bir sonraki genişlik kontrol edip sınıfı uygularken .fillwidthsınıfı uygular . Her iki durumda da diğer sınıf kullanılarak kaldırılır.removeClass()

İşte CSS

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

Sen değiştirebilir 100vhtarafından 100%size bir div ile görüntüyü genişletmek istiyorum. Bu örnek, görüntüyü orantılı olarak tüm pencereye sığacak şekilde uzatır.

Yukarı doğru ölçeklemeyi mi düşünüyorsunuz, aşağı doğru değil mi?

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

Ancak bu, en boy oranını kilitlemez.

Kutunun içinde görüntüyü ortalamak için tabloyu kullandım. En-boy oranını korur ve görüntüyü tamamen kutunun içinde olacak şekilde ölçeklendirir. Görüntü kutudan küçükse, ortada olduğu gibi gösterilir. Aşağıdaki kod 40px genişlik ve 40px yükseklik kutusunu kullanır. (Ne kadar iyi çalıştığından emin değilim çünkü onu daha karmaşık bir koddan kaldırdım ve biraz basitleştirdim)

CSS:

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML:

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

Bunu yapmanın en temiz ve en basit yolu:

Önce biraz CSS:

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

HTML:

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

Bu hile yapmalı!

Bu bana yardımcı oldu:

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

Ardından öğede (duyarlılık eklemek için javascript veya medya sorgularını kullanabilirsiniz):

<div class='img-class' style='transform: scale(X);'></div>

Bu yardımcı olur umarım!

.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

Olumsuz oy aldığım için çözümümü daha fazla açıklamak için cevabımı düzeltiyorum.

Yukarıda css'de gösterildiği gibi ayarlanan stillerle, şimdi aşağıdaki html div, resmi her zaman genişliğe sığacak şekilde gösterecek ve yükseklik en boy oranını genişliğe ayarlayacaktır. Böylece görüntü soruda sorulduğu gibi bir sınırlayıcı kutuya sığacak şekilde ölçeklenecektir .

<div class="boundingbox"><img src="image.jpg"/></div>