Genişlik: yükseklik oranını korurken daha büyük bir genişlik div kabına sığması için büyük bir görüntüyü otomatik olarak nasıl yeniden boyutlandırırsınız?

Örnek: stackoverflow.com - bir resim düzenleyici paneline eklendiğinde ve resim sayfaya sığmayacak kadar büyük olduğunda, görüntü otomatik olarak yeniden boyutlandırılır.

Resim etiketine açık bir genişlik veya yükseklik uygulamayın. Bunun yerine verin:

max-width:100%;
max-height:100%;

Ayrıca, height: auto;yalnızca bir genişlik belirtmek istiyorsanız.

Örnek: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

nesneye uygun

Bunu yapmanın başka bir yolu var.

<img style='height: 100%; width: 100%; object-fit: contain'/>

işi yapacak. CSS 3 şeyler.

Keman: http://jsfiddle.net/mbHB4/7364/

Şu anda bunu JPEG veya PNG dosyaları gibi sabit boyutlu görüntülerle belirli bir şekilde doğru bir şekilde yapmanın bir yolu yoktur.

Orantılı bir görüntü yeniden boyutlandırmak için, ayarlamak zorunda ya yüksekliği veya genişliği "% 100" ile, ikisini birden değil. Her ikisini de "% 100" olarak ayarlarsanız, resminiz uzatılır.

Yükseklik veya genişlik yapılıp yapılmayacağını seçmek resminize ve kap boyutlarınıza bağlıdır:

1. Resminiz ve kabınız "dikey şekilli" veya her ikisi de "yatay şekilli" ise (sırasıyla genişliklerinden daha uzun veya daha uzun olduklarından daha geniş), hangi yükseklik veya genişliğin "% 100" olduğu önemli değildir. .
2. Resminiz dikey ve kabınız yataysa, height="100%"resim üzerinde ayarlamanız gerekir .
3. Görüntünüz yataysa ve kabınız dikey width="100%"ise, görüntüyü ayarlamanız gerekir .

Resminiz değişken boyutlu bir vektör görüntü formatı olan bir SVG ise, kabın sığacağı genişlemenin otomatik olarak gerçekleşmesini sağlayabilirsiniz.

SVG dosyasında şu özelliklerin hiçbirinin <svg>etikette ayarlanmadığından emin olmanız gerekir :

height
width
viewbox

Çoğu vektör çizim programı, bir SVG dosyasını dışa aktarırken bu özellikleri ayarlayacaktır, bu nedenle her dışa aktardığınızda dosyanızı manuel olarak düzenlemeniz veya bunu yapmak için bir komut dosyası yazmanız gerekir.

Burada, sağlanan görüntü div'e sığmayacak kadar küçük veya çok büyük olsa bile img'nizi bir div içindeki dikey ve yatay olarak hizalayacak bir çözüm var.

HTML içeriği:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS içeriği:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

JQuery bölümü:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Basitleştir!

Haznesini ver , sabit height ve daha sonra da imgonun içinde etiketi, set widthve max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

Aradaki fark, widthdeğerini% 100 olarak ayarlamanızdır max-width.

Güzel bir hack.

Görüntüyü duyarlı hale getirmenin iki yolu var.

1. Görüntü arka plan görüntüsü olduğunda.

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Burada çalıştırın

2. Resim imgetiketteyken.

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Burada çalıştırın

Görüntüyü div olarak arka plan olarak ayarlayabilir ve sonra CSS arka plan boyutu özelliğini kullanabilirsiniz :

background-size: cover;

"Arka plan görüntüsünü mümkün olduğunca büyük olacak şekilde ölçeklendirin, böylece arka plan alanı tamamen arka plan görüntüsüyle kaplanır. Arka plan görüntüsünün bazı bölümleri arka plan konumlandırma alanında görünmeyebilir " - W3Schools

Çözümüme göz atın: http://codepen.io/petethepig/pen/dvFsA

Herhangi bir JavaScript kodu olmadan saf CSS ile yazılmıştır. Herhangi bir boyutta ve herhangi bir yönde görüntüleri işleyebilir.

Böyle bir HTML verildiğinde:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

CSS kodu şöyle olur:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Sadece bir çok seçenek ile tam olarak neye ihtiyacınız olduğunu yapan bir jQuery eklentisi yayınladım:

https://github.com/GestiXi/image-scale

Kullanımı:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

Bu çözüm görüntüyü uzatmaz ve tüm kabı doldurur, ancak görüntünün bir kısmını keser.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

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

Birçok insanın iyi bir seçenek olan nesne uyumu önerdiğini görüyorum . Ancak, eski tarayıcılarda da çalışmasını istiyorsanız , bunu kolayca yapmanın başka bir yolu vardır.

Oldukça basit. 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.

Aşağıdakiler benim için mükemmel çalışıyor:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Herhangi bir JavaScript gerekmeden çok daha iyi bir çözüm var. Tamamen duyarlı ve çok kullanıyorum. Genellikle herhangi bir en boy oranındaki görüntüyü, belirtilen en boy oranına sahip bir kap öğesine sığdırmanız gerekir. Ve tüm bunları tamamen duyarlı hale getirmek bir zorunluluktur.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Maksimum genişlik ve maksimum yüksekliği bağımsız olarak ayarlayabilirsiniz; görüntü en küçüğüne saygı gösterir (görüntünün değerlerine ve en boy oranına bağlı olarak). Ayrıca görüntüyü istediğiniz gibi hizalanacak şekilde ayarlayabilirsiniz (örneğin, sonsuz beyaz bir arka plandaki bir ürün resmi için kolayca orta tabana konumlandırabilirsiniz).

Resminiz için gereken yüksekliği ve genişliği <img> etiketini içeren div öğesine verin. Uygun stil etiketinde yükseklik / genişlik vermeyi unutmayın.

<img> etiketinde max-heightve max-widthdeğerini% 100 olarak verin .

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Ayrıntıları doğru olduktan sonra uygun sınıflara ekleyebilirsiniz.

Aşağıdaki kod önceki yanıtlardan uyarlanmıştır ve benim adı verilen bir görüntü kullanılarak test edilmiştir storm.jpg.

Bu, görüntüyü gösteren basit bir sayfanın eksiksiz HTML kodudur. Bu mükemmel çalışıyor ve www.resizemybrowser.com ile benim tarafımdan test edildi. CSS kodunu HTML kodunuzun üst kısmına baş bölümünüzün altına yerleştirin. Resim kodunu resmi istediğiniz yere koyun.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

Tarayıcıya nereye yerleştirdiğinizin yüksekliğini söylemelisiniz:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Düzenleme: Önceki tablo tabanlı görüntü konumlandırmasında Internet Explorer 11'de sorunlar vardı ( öğelerde max-heightçalışmaz display:table). Bunu hem Internet Explorer 7 hem de Internet Explorer 11'de iyi çalışmayan satır içi tabanlı konumlandırma ile değiştirdim, aynı zamanda daha az kod gerektirir.

İşte konuyu ele alacağım. Yalnızca kap belirli bir boyuta sahipse ( max-widthve max-heightsomut boyutu olmayan kaplarla birlikte görünmüyorsa) çalışır, ancak CSS içeriğini yeniden kullanılmasına izin verecek şekilde yazdım ( picture-framesınıf ekle ve px125mevcut kapınıza boyut sınıfı).

CSS'de:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

Ve HTML'de:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

DEMO

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Düzenleme: JavaScript kullanarak olası iyileştirme (görüntüleri büyütme):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

Aşağıdaki kodu kullanarak bu sorunu düzeltti:

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

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

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

Burada yanıtlandığı gibi, tarayıcınızda çalışmıyorsa (Chrome gibi) vhyerine birimleri de kullanabilirsiniz max-height: 100%:

img {
    max-height: 75vh;
}

Köprü içindeki bir görüntüyü yatay ve dikey olarak orantılı olarak ortaladım ve ölçeklendirdim:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Internet Explorer, Firefox ve Safari'de test edildi.

Merkezleme hakkında daha fazla bilgi burada .

Thorn007'nin kabul ettiği cevap , görüntü çok küçük olduğunda çalışmaz .

Bunu çözmek için bir ölçek faktörü ekledim . Bu şekilde görüntüyü büyütür ve div kabını doldurur.

Misal:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

Notlar:

1. WebKit -webkit-transform:scale(4); -webkit-transform-origin:left top;için stile eklemelisiniz .
2. 4 ölçek faktörü ile, maksimum genişlik = 400/4 = 100 ve maksimum yükseklik = 200/4 = 50
3. Alternatif bir çözüm, maksimum genişlik ve maksimum yüksekliği% 25 olarak ayarlamaktır. Daha da basit.

Bootstrap kullanıyorsanız, img-responsivesınıfı imgetikete eklemeniz yeterlidir :

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Bootstrap Görüntüleri

Benim için işe yarayan basit bir çözüm (4 adımlı düzeltme !!) aşağıdadır. Örnek, toplam boyutu belirlemek için genişliği kullanır, ancak bunun yerine yüksekliği kullanmak için de çevirebilirsiniz.

1. Görüntü kapsayıcısına CSS stili uygulama (örneğin, <img>)
2. Width özelliğini istediğiniz boyuta ayarlayın
   • Boyutlar %için göreceli boyut veya otomatik ölçeklendirme kullanın (görüntü kabına veya ekrana göre)
   • pxStatik veya ayarlanmış boyut için (veya başka bir) kullanın
3. Height özelliğini genişliğe göre otomatik olarak ayarlanacak şekilde ayarlama
4. ZEVK ALMAK!

Örneğin,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

Kabul edilenler de dahil olmak üzere, verilen tüm cevaplar yalnızcadiv sargının sabit bir boyutta olduğu varsayımı altında çalışır . Öyleyse , sargının boyutu ne olursa olsun bunu nasıl yapacağınız divve duyarlı bir sayfa geliştirirseniz bu çok yararlıdır:

Bu bildirimleri DIVseçicinizin içine yazın :

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Ardından bu bildirimleri IMGseçicinizin içine koyun :

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

ÇOK ÖNEMLİ:

Değeri hem ve hem de seçiciler için aynımaxHeight olmalıdır .DIVIMG

Basit bir çözüm flexbox kullanmaktır. Kabın CSS'sini şu şekilde tanımlayın:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

İçerdiği görüntü genişliğini% 100 olarak ayarlayın; kapta, boyutları korunmuş şekilde güzel bir ortalanmış görüntü elde etmelisiniz.

Matematik biraz çözüm kolay ...

Görüntüyü bir div öğesine ve ardından resmi belirttiğiniz HTML dosyasına yerleştirmeniz yeterlidir. Genişliğin yüksekliğe tam oranını hesaplamak için görüntünün piksel değerlerini kullanarak genişlik ve yükseklik değerlerini yüzde olarak ayarlayın.

Örneğin, 200 piksel genişliğe ve 160 piksel yüksekliğe sahip bir görüntünüz olduğunu varsayalım. Genişlik değerinin% 100 olacağını güvenli bir şekilde söyleyebilirsiniz, çünkü daha büyük bir değerdir. Daha sonra yükseklik değerini hesaplamak için yüksekliği% 80 yüzde değerini veren genişliğe bölmeniz yeterlidir. Kodda böyle bir şey görünecek ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

Bunu yapmanın en basit yolu object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Bootstrap kullanıyorsanız, img-responsivesınıfı ekleyin ve

.container img{
    object-fit: cover;
}

Cevabımı kontrol et, Görüntüyü duyarlı yap - en basit yol -

img{
    width: 100%;
    max-width: 800px;
}

Veya şunları kullanabilirsiniz:

background-position:center;
background-size:cover;

Şimdi görüntü div'ın tüm alanını alacak.