Bu görüntüyü taşmadan <div>veya görüntüyü eğmeden mümkün olan maksimum boyuta getirmem gerekiyor.

Görüntünün en boy oranını tahmin edemiyorum, bu yüzden kullanılıp kullanılmayacağını bilmenin bir yolu yok:

<img src="url" style="width: 100%;">

veya

<img src="url" style="height: 100%;">

Her ikisini de kullanamıyorum (yani style = "width: 100%; height: 100%;") çünkü görüntüyü sığacak şekilde uzatır <div>.

Ekranın <div>yüzdesine göre ayarlanmış bir boyutu vardır ve bu da öngörülemez.

Güncelleme 2016:

Modern tarayıcı çok daha iyi davranır. Tek yapmanız gereken resim genişliğini% 100 olarak ayarlamaktır ( demo )

.container img {
   width: 100%;
}

En boy oranını bilmediğiniz için, biraz komut dosyası kullanmanız gerekir. İşte nasıl jQuery ( demo ) ile yapardı :

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

Senaryo

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

Sadece kullanarak bunu yapmak için çok daha kolay bir yolu var CSSve HTML:

HTML:

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

Bu, görüntünüzü arka plan olarak yerleştirir ve divbozulma olmadan boyuta uyacak şekilde uzatır .

Mükemmel bir çözüm değil, ancak bu CSS yardımcı olabilir. Yakınlaştırma, bu kodun çalışmasını sağlayan şeydir ve faktör, küçük görüntüler için ideal olarak çalışmak için teorik olarak sonsuz olmalıdır - ancak çoğu durumda 2, 4 veya 8 iyi çalışır.

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

Yapabiliyorsanız, arka plan resimlerini kullanın ve ayarlayın background-size: cover. Bu, arka planın tüm öğeyi kaplamasını sağlayacaktır.

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Satır içi görüntüleri kullanmakta zorlanıyorsanız, birkaç seçenek vardır. İlk olarak,

nesneye uygun

Bu özellik resimler, videolar ve benzeri diğer nesnelere etki eder background-size: cover.

CSS

img {
  object-fit: cover;
}

Ne yazık ki, tarayıcı desteği IE 11 sürümüne kadar hiç de desteklemiyor. Sonraki seçenek jQuery kullanır

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

Özel jQuery eklentisi

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

Eklentiyi böyle kullanın

jQuery('.cover-image').coverImage();

Bir görüntü alır, görüntünün sarmalayıcı öğesinde arka plan görüntüsü olarak ayarlar ve imgetiketi belgeden kaldırır . Son olarak kullanabilirsiniz

Saf CSS

Bunu yedek olarak kullanabilirsiniz. Görüntü, kapsayıcısını kapsayacak şekilde ölçeklenir, ancak ölçeklendirilmez.

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Umarım bu birine yardımcı olabilir, mutlu kodlama!

CSS3'e teşekkürler

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Her zaman olduğu gibi IE ve EDGE: http://caniuse.com/#feat=object-fit

2019'u güncelleyin.

Artık object-fitaşağıdaki değerleri kabul eden css özelliğini kullanabilirsiniz :fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Örnek olarak, görüntüyü tutan bir kabınız olabilir.

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;

Bu sadece HTML ve CSS ile imkansız ya da en azından egzotik ve karmaşık. Bazı javascriptleri atmak istiyorsanız, jQuery kullanan bir çözüm:

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

Bu, görüntünün boyutuna bakılmaksızın her zaman üst öğenin içine sığması için yeniden boyutlandırılır. Ve $(window).resize()olaya bağlı olduğu için, kullanıcı pencereyi yeniden boyutlandırdığında görüntü ayarlanır.

Bu, görüntüyü kapta ortalamaya çalışmaz, bu mümkün olabilir, ancak sanırım bundan sonra değilsiniz.

Dış containerbölmenin genişliğini ve yüksekliğini ayarlayın . Sonra img üzerinde aşağıdaki stili kullanın:

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

Bu, img'nizin en boy oranını korumanıza yardımcı olacaktır

Görüntülerin en boy oranını korurken bir maksimum genişlik veya yükseklik (çok büyük olmayacak şekilde) ayarlamak istiyorsanız, bunu yapabilirsiniz:

img{
   object-fit: contain;
   max-height: 70px;
}

Ben bu soruya benzeyen bir problem ararken rastladım. Duyarlı tasarıma sahip bir web sayfası yapıyorum ve sayfaya yerleştirilen öğelerin genişliği ekran genişliğinin yüzde olarak ayarlanmış. Yükseklik bir vw değeri ile ayarlanır.

Ben PHP ve bir veritabanı arka uç ile mesaj eklemek beri, saf CSS söz konusu oldu. Ancak jQuery / javascript çözüm biraz zahmetli buldum, bu yüzden temiz (en azından kendimi düşünüyorum) bir çözüm ile geldi.

HTML (veya php)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}

<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

Style = "" kullanarak PHP'nin sayfamı dinamik olarak güncellemesi mümkündür ve CSS stilinin style = "" ile birlikte dinamik div etiketini kapsayacak şekilde ölçeklendirilmiş mükemmel bir görüntü elde edersiniz.

object-fit: cover;Üst div'de kullanabilirsiniz .

https://css-tricks.com/almanac/properties/o/object-fit/

Bu görüntüyü taşmadan veya görüntüyü çarpmadan mümkün olan maksimum boyuta getirmek için .

Uygulamak...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

görüntü stilleri.

Bu yöntemi kullanarak div'inizi, div ve görüntülerin değişen görüntü oranıyla doldurabilirsiniz.

jQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

Bu benim için hile yaptı

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

IMG etiketi ile çalışıyorsanız, kolaydır.

Bunu ben yaptım:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

ama nasıl #pic {background: url (img / menu.png) ile çalışmak nasıl bulamadık} Herkes? Teşekkürler

Benzer bir sorunum vardı. Sadece CSS ile çözdüm .

Temel olarak Object-fit: cover, bir görüntüyü div içinde konumlandırırken en boy oranını koruma görevini gerçekleştirmenize yardımcı olur.

Ancak problem Object-fit: coverIE'de çalışmıyordu ve% 100 genişlik alıyordu ve% 100 yükseklik ve en boy oranı bozuktu. Başka bir deyişle, görüntü yakınlaştırma efekti kromda gördüğüm yerde değildi.

Yaklaştığım yaklaşım, görüntüyü kabın içine mutlak olarak yerleştirmek ve daha sonra kombinasyonu kullanarak merkeze yerleştirmekti:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Merkezde olduğunda, görüntüye veriyorum,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Bu, görüntünün Object-fit: cover efektini almasını sağlar.

Yukarıdaki mantığın bir gösterimi.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Bu mantık tüm tarayıcılarda çalışır.

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

... Ve görüntüyü ayarlamak veya değiştirmek istiyorsanız (örnek olarak #foo kullanarak):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

Burada bulunan çözümlerin çoğunun bazı sınırlamaları vardır: bazıları IE'de (nesne sığdır) veya daha eski tarayıcılarda çalışmaz, diğer çözümler görüntüleri ölçeklendirmez (sadece küçültür), birçok çözüm pencerenin yeniden boyutlandırılmasını desteklemez ve birçoğu genel değil, düzeltme çözünürlüğü veya mizanpaj bekliyoruz (dikey veya yatay)

Javascript ve jquery kullanmak bir sorun değilse @Tatu Ulmanen koduna dayalı bu çözüm var. Bazı sorunları düzelttim ve görüntünün dinamik olarak yüklenmesi ve başlangıçta kullanılamaması durumunda bazı kodlar ekledim. Temel olarak fikir iki farklı css kuralına sahip olmak ve gerektiğinde uygulamaktır: bir sınırlama yükseklik olduğunda, bu yüzden yanlarda siyah çubuklar göstermeliyiz ve sınırlama genişlik olduğunda css kuralını belirlemeliyiz, bu yüzden üstte / altta siyah çubuklar gösterir.

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

Aşağıdaki gibi bir HTML öğesi için:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>