Pertanyaan Bagaimana cara mengubah ukuran gambar secara otomatis agar sesuai dengan wadah div


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


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


1078
2018-06-12 17:00


asal


Jawaban:


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


1436
2018-06-12 17:03



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

ternyata ada cara lain untuk melakukan ini.

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

akan melakukan pekerjaan. Ini barang CSS3.

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


237
2018-06-12 02:48



Saat ini tidak ada cara untuk melakukannya dengan benar dengan cara deterministik, dengan gambar ukuran tetap seperti file JPEG atau PNG.

Untuk mengubah ukuran gambar secara proporsional, Anda harus mengaturnya antara tinggi atau lebar ke "100%", tetapi tidak keduanya. Jika Anda menetapkan keduanya menjadi "100%", gambar Anda akan direntangkan.

Memilih apakah akan melakukan tinggi atau lebar tergantung pada gambar dan dimensi penampung Anda:

  1. Jika gambar dan wadah Anda keduanya "berbentuk potret" atau keduanya "berbentuk lanskap" (lebih tinggi daripada lebar, atau lebih lebar dari tinggi, masing-masing), maka tidak masalah yang tingginya atau lebarnya "% 100" .
  2. Jika gambar Anda potret, dan penampung Anda lanskap, Anda harus menetapkan height="100%" pada gambar.
  3. Jika gambar Anda lanskap, dan penampung Anda potret, Anda harus menetapkan width="100%" pada gambar.

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

Anda hanya harus memastikan bahwa file SVG tidak memiliki properti yang diatur dalam <svg> menandai:

height
width
viewbox

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


93
2018-06-11 20:13



Berikut ini adalah solusi yang akan secara vertikal dan horizontal menyelaraskan img Anda dalam div tanpa peregangan bahkan jika gambar yang diberikan terlalu kecil atau terlalu besar untuk masuk dalam div. Html:

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

CSS:

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

The JQuery:

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

Saya harap ini membantu kalian keluar


65
2017-10-04 09:40



Buat sederhana!

Berikan wadah a tetap  height dan kemudian untuk img tag di dalamnya mengatur width dan max-height.

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

Perbedaannya adalah Anda mengatur width menjadi 100% bukan max-width.


37
2017-09-25 08:45



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

Ini ditulis dalam CSS murni, tanpa kode JS. Dapat menangani gambar dari 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;
}

19
2018-06-28 18:26



Anda dapat mengatur gambar sebagai latar belakang div, lalu gunakan css background-size property 

background-size: cover;

dan itu akan "Skala gambar latar belakang menjadi seluas mungkin sehingga area latar belakang benar-benar tertutup oleh gambar latar belakang. Beberapa bagian dari gambar latar belakang mungkin tidak terlihat dalam area posisi latar belakang" -w3schools.com


17
2017-12-16 12:37



Peretasan yang indah.

Anda memiliki dua cara untuk membuat gambar menjadi responsif.

  1. Ketika sebuah 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>

Menjalankannya sini


Tetapi yang harus digunakan img tag untuk menempatkan gambar karena lebih baik daripada background-image dengan kondisi SEO seperti yang Anda bisa tulis kata kunci dalam alt dari img menandai. Jadi di sini Anda bisa membuat gambar responsif.

  1. Saat gambar sedang aktif img menandai.
#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>

Menjalankannya sini


12
2018-02-21 07:45



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

}

9
2017-08-07 11:54