Bagaimana Anda mengubah ukuran gambar yang besar secara otomatis sehingga akan masuk ke wadah div lebar yang lebih kecil sambil mempertahankan rasio lebar: tinggi?

Contoh: stackoverflow.com - ketika gambar dimasukkan ke panel editor dan gambar terlalu besar untuk masuk ke halaman, gambar secara otomatis diubah ukurannya.

Jangan menerapkan lebar atau tinggi eksplisit ke tag gambar. Sebaliknya, berikan:

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

Juga, height: auto;jika Anda ingin menentukan lebar saja.

Contoh: 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>

objek-fit

Ternyata ada cara lain untuk melakukan ini.

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

akan melakukan pekerjaan. Ini CSS 3 hal.

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

Saat ini tidak ada cara untuk melakukan ini dengan benar dalam cara deterministik, dengan gambar berukuran tetap seperti file JPEG atau PNG.

Untuk mengubah ukuran gambar secara proporsional, Anda harus mengatur baik tinggi atau lebar untuk "100%", tapi tidak keduanya. Jika Anda mengatur keduanya menjadi "100%", gambar Anda akan ditarik.

Memilih apakah akan melakukan ketinggian atau lebar tergantung pada dimensi gambar dan wadah Anda:

1. Jika gambar dan wadah Anda masing-masing berbentuk "potret" atau "lanskap" (lebih tinggi dari lebar, atau lebih lebar dari tinggi,), maka tidak masalah yang tinggi atau lebar mana yang "% 100" .
2. Jika gambar Anda adalah potret, dan wadah Anda lanskap, Anda harus mengatur height="100%"gambar tersebut.
3. Jika gambar Anda lanskap, dan wadah Anda adalah potret, Anda harus mengatur width="100%"gambar tersebut.

Jika gambar Anda adalah SVG, yang merupakan format gambar vektor berukuran variabel, Anda dapat memiliki ekspansi agar sesuai wadah terjadi secara otomatis.

Anda hanya perlu memastikan bahwa file SVG tidak memiliki properti ini yang diatur dalam <svg>tag:

height
width
viewbox

Sebagian besar program menggambar vektor di luar sana akan mengatur properti ini ketika mengekspor file SVG, jadi Anda harus mengedit file Anda secara manual setiap kali Anda mengekspor, atau menulis skrip untuk melakukannya.

Berikut ini adalah solusi yang akan menyelaraskan img Anda secara vertikal dan horizontal dalam div tanpa peregangan bahkan jika gambar yang disediakan terlalu kecil atau terlalu besar untuk muat di div.

Konten HTML:

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

Konten CSS:

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

Bagian jQuery:

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

Sederhanakan!

Berikan wadah diperbaiki height dan kemudian untuk imgtag di dalamnya, atur widthdan max-height.

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

Perbedaannya adalah bahwa Anda menetapkan widthmenjadi 100%, bukan max-width.

Retasan yang indah.

Anda memiliki dua cara untuk membuat gambar responsif.

1. Ketika suatu gambar adalah gambar latar belakang.

#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>

Jalankan di sini

2. Saat gambar dalam imgtag.

#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>

Jalankan di sini

Anda dapat mengatur gambar sebagai latar belakang untuk div, dan kemudian menggunakan properti ukuran latar belakang CSS :

background-size: cover;

Ini akan "Skala gambar latar menjadi sebesar mungkin sehingga area latar belakang sepenuhnya ditutupi oleh gambar latar belakang. Beberapa bagian dari gambar latar belakang mungkin tidak terlihat dalam area penentuan posisi latar belakang" - W3Schools

Lihat solusi saya: http://codepen.io/petethepig/pen/dvFsA

Itu ditulis dalam CSS murni, tanpa kode JavaScript. Ia dapat menangani gambar dengan berbagai ukuran dan orientasi apa pun.

Diberikan HTML seperti itu:

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

kode CSS adalah:

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

Saya baru saja menerbitkan plugin jQuery yang melakukan apa yang Anda butuhkan dengan banyak opsi:

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

Pemakaian:

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

Solusi ini tidak meregangkan gambar dan mengisi seluruh wadah, tetapi memotong sebagian gambar.

HTML:

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

CSS:

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

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

Saya melihat bahwa banyak orang menyarankan objek-fit yang merupakan opsi yang bagus. Tetapi jika Anda ingin itu berfungsi di browser lama juga , ada cara lain untuk melakukannya dengan mudah.

Cukup sederhana. 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.

Berikut ini berfungsi dengan baik untuk saya:

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

Saya punya solusi yang lebih baik tanpa perlu JavaScript. Ini sepenuhnya responsif, dan saya sering menggunakannya. Anda sering perlu mencocokkan gambar rasio aspek apa pun dengan elemen penampung dengan rasio aspek tertentu. Dan memiliki semua ini sepenuhnya responsif adalah suatu keharusan.

/* 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>

Anda dapat mengatur lebar maks dan tinggi maks secara independen; gambar akan menghormati yang terkecil (tergantung pada nilai dan rasio aspek gambar). Anda juga dapat mengatur gambar agar selaras seperti yang Anda inginkan (misalnya, untuk gambar produk pada latar belakang putih yang tak terbatas, Anda dapat menempatkannya di tengah bawah dengan mudah).

Berikan tinggi dan lebar yang Anda butuhkan untuk gambar Anda ke div yang berisi tag <img>. Jangan lupa untuk memberi tinggi / lebar di tag gaya yang tepat.

Di tag <img>, berikan max-heightdan max-widthsebagai 100%.

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

Anda dapat menambahkan detail di kelas yang sesuai setelah Anda melakukannya dengan benar.

Kode di bawah ini diadaptasi dari jawaban sebelumnya dan diuji oleh saya menggunakan gambar yang disebut storm.jpg.

Ini adalah kode HTML lengkap untuk halaman sederhana yang menampilkan gambar. Ini berfungsi sempurna dan telah diuji oleh saya dengan www.resizemybrowser.com. Letakkan kode CSS di bagian atas kode HTML Anda, di bawah bagian kepala Anda. Letakkan kode gambar di mana pun Anda inginkan.

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

Anda harus memberi tahu browser ketinggian tempat Anda meletakkannya:

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

Sunting: Penempatan gambar berbasis tabel sebelumnya memiliki masalah di Internet Explorer 11 ( max-heighttidak berfungsi dalam display:tableelemen). Saya telah menggantinya dengan posisi berbasis inline yang tidak hanya berfungsi dengan baik di Internet Explorer 7 dan Internet Explorer 11, tetapi juga membutuhkan lebih sedikit kode.

Inilah pendapat saya tentang masalah ini. Ini hanya akan berfungsi jika kontainer memiliki ukuran yang ditentukan ( max-widthdan max-heightsepertinya tidak cocok dengan kontainer yang tidak memiliki ukuran beton), tapi saya menulis konten CSS dengan cara yang memungkinkannya untuk digunakan kembali (tambahkan picture-framekelas dan px125ukuran kelas ke wadah Anda yang ada).

Dalam CSS:

.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 */
}

Dan dalam HTML:

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

Sunting: Kemungkinan peningkatan lebih lanjut menggunakan JavaScript (meningkatkan gambar):

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

Saya memperbaiki masalah ini menggunakan kode berikut:

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

Seperti yang dijawab di sini , Anda juga dapat menggunakan vhunit alih-alih max-height: 100%jika tidak berfungsi di browser Anda (seperti Chrome):

img {
    max-height: 75vh;
}

Saya memusatkan dan menskala gambar secara proporsional di dalam hyperlink baik secara horizontal maupun vertikal dengan cara ini:

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

Itu diuji di Internet Explorer, Firefox, dan Safari.

Informasi lebih lanjut tentang pemusatan ada di sini .

Jawaban yang diterima dari Thorn007 tidak berfungsi ketika gambar terlalu kecil .

Untuk mengatasi ini, saya menambahkan faktor skala . Dengan cara ini, itu membuat gambar lebih besar dan mengisi wadah div.

Contoh:

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

Catatan:

1. Untuk WebKit Anda harus menambahkan -webkit-transform:scale(4); -webkit-transform-origin:left top;gaya.
2. Dengan faktor skala 4, Anda memiliki max-width = 400/4 = 100 dan max-height = 200/4 = 50
3. Solusi alternatif adalah mengatur lebar maksimum dan tinggi maksimum pada 25%. Itu bahkan lebih sederhana.

Jika Anda menggunakan Bootstrap, Anda hanya perlu menambahkan img-responsivekelas ke imgtag:

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

Gambar Bootstrap

Solusi sederhana (perbaikan 4 langkah !!) yang sepertinya berfungsi untuk saya, ada di bawah ini. Contoh ini menggunakan lebar untuk menentukan ukuran keseluruhan, tetapi Anda juga dapat membaliknya untuk menggunakan ketinggian.

1. Terapkan gaya CSS ke wadah gambar (misalnya, <img>)
2. Tetapkan properti lebar ke dimensi yang Anda inginkan
   • Untuk dimensi, gunakan %untuk ukuran relatif, atau penskalaan otomatis (berdasarkan wadah gambar atau tampilan)
   • Gunakan px(atau lainnya) untuk dimensi statis, atau setel
3. Atur properti tinggi untuk secara otomatis menyesuaikan, berdasarkan pada lebar
4. NIKMATI!

Sebagai contoh,

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

Semua jawaban yang diberikan, termasuk jawaban yang diterima, hanya berfungsi dengan asumsi bahwa divpembungkusnya berukuran tetap. Jadi ini adalah bagaimana melakukannya dengan ukuran apa pundiv bungkusnya dan ini sangat berguna jika Anda mengembangkan halaman responsif:

Tuliskan deklarasi ini di dalam DIVpemilih Anda :

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

Lalu masukkan deklarasi ini di dalam IMGpemilih Anda :

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

SANGAT PENTING:

Nilai maxHeightharus sama untuk DIVdan IMGpenyeleksi.

Solusi sederhana adalah dengan menggunakan flexbox. Tentukan CSS penampung untuk:

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

Sesuaikan lebar gambar yang terkandung hingga 100% dan Anda harus mendapatkan gambar tengah yang bagus di dalam wadah dengan dimensi dipertahankan.

Solusinya mudah dengan sedikit matematika ...

Cukup masukkan gambar dalam div dan kemudian dalam file HTML tempat Anda menentukan gambar. Atur nilai lebar dan tinggi dalam persentase menggunakan nilai piksel gambar untuk menghitung rasio lebar dan tinggi yang tepat.

Misalnya, Anda memiliki gambar yang memiliki lebar 200 piksel dan tinggi 160 piksel. Anda dapat dengan aman mengatakan bahwa nilai lebar akan 100%, karena itu adalah nilai yang lebih besar. Untuk kemudian menghitung nilai tinggi Anda cukup membagi tinggi dengan lebar yang memberikan nilai persentase 80%. Dalam kode itu akan terlihat seperti ini ...

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

Cara paling sederhana untuk melakukan ini adalah dengan menggunakan object-fit:

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

.container{
   height: 300px;
}

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

Jika Anda menggunakan Bootstrap, cukup tambahkan img-responsivekelas dan ubah ke

.container img{
    object-fit: cover;
}

Periksa jawaban saya, Jadikan gambar responsif - cara paling sederhana -

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

Atau Anda cukup menggunakan:

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

Sekarang gambar akan mengambil semua ruang div.