Saya perlu membuat peregangan gambar ini ke ukuran maksimum yang dimungkinkan tanpa melimpah <div>atau memiringkan gambar.

Saya tidak dapat memprediksi aspek rasio gambar, jadi tidak ada cara untuk mengetahui apakah akan menggunakan:

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

atau

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

Saya tidak dapat menggunakan keduanya (yaitu style = "width: 100%; height: 100%;") karena itu akan meregangkan gambar agar sesuai dengan <div>.

Ini <div>memiliki ukuran yang ditetapkan oleh persentase layar, yang juga tidak dapat diprediksi.

Pembaruan 2016:

Peramban modern berperilaku jauh lebih baik. Yang perlu Anda lakukan adalah mengatur lebar gambar menjadi 100% ( demo )

.container img {
   width: 100%;
}

Karena Anda tidak tahu rasio aspek, Anda harus menggunakan beberapa skrip. Inilah cara saya melakukannya dengan jQuery ( demo ):

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>

Naskah

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

Ada cara yang jauh lebih mudah untuk melakukan ini hanya menggunakan CSSdan HTML:

HTML:

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

CSS:

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

Ini akan menempatkan gambar Anda sebagai latar belakang, dan meregangkannya agar sesuai dengan divukuran tanpa distorsi.

Bukan solusi yang sempurna, tetapi CSS ini mungkin membantu. Zoom adalah yang membuat kode ini berfungsi, dan faktornya secara teoritis harus tak terbatas untuk bekerja secara ideal untuk gambar kecil - tetapi 2, 4, atau 8 berfungsi dengan baik dalam banyak kasus.

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

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

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

Jika Anda bisa, gunakan gambar latar belakang dan atur background-size: cover. Ini akan membuat latar belakang menutupi seluruh elemen.

CSS

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

Jika Anda terjebak dengan menggunakan gambar sebaris ada beberapa opsi. Pertama, ada

objek-fit

Properti ini bertindak pada gambar, video, dan objek lain yang serupa background-size: cover.

CSS

img {
  object-fit: cover;
}

Sayangnya, dukungan browser tidak terlalu bagus dengan IE hingga versi 11 yang tidak mendukung sama sekali. Opsi selanjutnya menggunakan jQuery

CSS + jQuery

HTML

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

CSS

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

Plugin jQuery khusus

(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);

Gunakan plugin seperti ini

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

Ini akan mengambil gambar, mengaturnya sebagai gambar latar belakang pada elemen pembungkus gambar dan menghapus imgtag dari dokumen. Terakhir Anda bisa menggunakannya

CSS murni

Anda mungkin menggunakan ini sebagai mundur. Gambar akan ditingkatkan untuk menutupi wadahnya tetapi tidak akan turun.

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

Semoga ini bisa membantu seseorang, selamat coding!

Berkat CSS3

img
{
   object-fit: contain;
}

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

IE dan EDGE seperti selalu orang luar: http://caniuse.com/#feat=object-fit

Perbarui 2019.

Anda sekarang dapat menggunakan object-fitproperti css yang menerima nilai-nilai berikut:fill | contain | cover | none | scale-down

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

Sebagai contoh, Anda bisa memiliki wadah yang menampung gambar.

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

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

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

Itu tidak mungkin hanya dengan HTML dan CSS, atau setidaknya sangat eksotis dan rumit. Jika Anda ingin memasukkan beberapa javascript, berikut ini solusinya menggunakan jQuery:

$(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();
});

Itu akan mengubah ukuran gambar sehingga akan selalu muat di dalam elemen induk, terlepas dari ukurannya. Dan saat diikat ke $(window).resize()acara, saat pengguna mengubah ukuran jendela, gambar akan menyesuaikan.

Ini tidak mencoba memusatkan gambar dalam wadah, itu mungkin tapi saya kira bukan itu yang Anda cari.

Atur lebar dan tinggi containerdiv luar . Kemudian gunakan penataan di bawah ini di img:

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

Ini akan membantu Anda menjaga rasio aspek img Anda

Jika Anda ingin mengatur lebar atau tinggi maks (sehingga tidak akan terlalu besar) sambil menjaga aspek rasio gambar, Anda dapat melakukan ini:

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

Saya menemukan pertanyaan ini mencari masalah simular. Saya membuat halaman web dengan desain responsif dan lebar elemen yang ditempatkan pada halaman diatur ke persen dari lebar layar. Ketinggian diatur dengan nilai vw.

Karena saya menambahkan posting dengan PHP dan database backend, CSS murni tidak ada pertanyaan. Namun saya menemukan solusi jQuery / javascript sedikit merepotkan, jadi saya datang dengan solusi yang rapi (jadi saya pikir setidaknya saya sendiri) solusi.

HTML (atau 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>

Dengan menggunakan style = "" ada kemungkinan untuk memperbarui PHP halaman saya secara dinamis dan style-CSS bersama dengan style = "" akan berakhir pada gambar yang tertutup sempurna, diskalakan untuk menutupi tag div dinamis.

Anda dapat menggunakan object-fit: cover;div induk.

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

Untuk membuat gambar ini meregang ke ukuran maksimum yang dimungkinkan tanpa melimpah atau memiringkan gambar.

Menerapkan...

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

gaya ke gambar.

Dengan menggunakan metode ini, Anda dapat mengisi div Anda dengan perbandingan gambar divs dan gambar yang bervariasi.

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

Ini berhasil bagi saya

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

jika Anda bekerja dengan tag IMG, itu mudah.

Saya membuat ini:

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

tetapi saya tidak menemukan cara membuatnya berfungsi dengan #pic {background: url (img / menu.png)} Enyone? Terima kasih

Saya memiliki masalah serupa. Saya mengatasinya hanya dengan CSS .

Pada dasarnya Object-fit: covermembantu Anda mencapai tugas mempertahankan rasio aspek sambil memposisikan gambar di dalam div.

Tapi masalahnya Object-fit: covertidak berfungsi di IE dan butuh 100% lebar dan tinggi 100% dan aspek rasio terdistorsi. Dengan kata lain efek pembesaran gambar tidak ada yang saya lihat di chrome.

Pendekatan yang saya ambil adalah memposisikan gambar di dalam wadah dengan absolut dan kemudian meletakkannya tepat di tengah menggunakan kombinasi:

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

Setelah itu di tengah, saya berikan pada gambar,

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

Ini membuat gambar mendapatkan efek dari Object-fit: cover.

Berikut ini adalah demonstrasi dari logika di atas.

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

Logika ini berfungsi di semua browser.

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

... Dan jika Anda ingin mengatur atau mengubah gambar (menggunakan #foo sebagai contoh):

jQuery:

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

JavaScript:

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

Banyak solusi yang ditemukan di sini memiliki beberapa batasan: beberapa tidak bekerja di IE (object-fit) atau browser yang lebih lama, solusi lain tidak meningkatkan skala gambar (hanya mengecilkannya), banyak solusi tidak mendukung ukuran jendela dan banyak yang tidak generik, baik mengharapkan resolusi atau tata letak perbaikan (potret atau lanskap)

Jika menggunakan javascript dan jquery bukan masalah, saya punya solusi ini berdasarkan kode @Tatu Ulmanen. Saya memperbaiki beberapa masalah, dan menambahkan beberapa kode jika gambar dimuat secara dinamis dan tidak tersedia pada awal. Pada dasarnya idenya adalah untuk memiliki dua aturan css yang berbeda dan menerapkannya saat diminta: satu ketika batasannya adalah tinggi, jadi kita perlu menunjukkan bar hitam di samping, dan yang lain aturan css ketika batasannya adalah lebar, jadi kita perlu tampilkan bilah hitam di bagian atas / bawah.

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

Untuk elemen HTML seperti:

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