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

1513

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.

001
sumber
Beberapa perpustakaan menarik untuk melakukan pengubahan ukuran gambar agar sesuai dengan wadah: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin
Frosty Z
Selain @ Kevin menjawab ... Anda juga dapat menggunakan layanan seperti ImageBoss untuk membuat gambar Anda dengan ukuran yang Anda inginkan, sesuai permintaan. Menyesuaikan gambar pada wadah sangat bagus tetapi melayani gambar dengan responsif adalah cara yang baik.
Igor Escobar
Duplikat yang
memungkinkan
@ jolumg Tidak cukup; sementara ada banyak tumpang tindih dalam beberapa solusi, ada juga banyak solusi yang tidak dapat dipertukarkan, karena yang satu bertanya bagaimana meningkatkan skala gambar, sedangkan yang satu ini meminta untuk menurunkan skala gambar.
TylerH
1
001 - Ini adalah jawaban untuk pertanyaanmu yang diajukan yang sudah ditutup sebelum aku melihatnya. Cara memanggil komponen anak dari komponen induk. Saya menulis posting blog yang menjelaskan bagaimana membuat komponen berkomunikasi menggunakan antarmuka: datajugglerblazor.blogspot.com/2020/01/…
Data Juggler

Jawaban:

1878

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>

Kevin
sumber
40
Ini tidak akan menskalakan tinggi dan lebar.
Neil
75
tinggi: otomatis; jika Anda ingin menentukan lebar saja
Roi
82
Bagaimana jika gambarnya terlalu kecil?
Scott Rippey
18
@Scott Rippey - Jika gambar lebih kecil dari wadah, itu tidak akan berubah karena aturan yang digunakan adalah max-width dan max-height.
Surreal Dreams
15
Dengan <a>tag penutup , gambar tidak diubah ukurannya. Menerapkan aturan pada tag-A memecahkan masalah ini.
SPRBRN
433

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/

Shih-Min Lee
sumber
39
Ini akan menskala gambar agar pas dengan dimensi yang lebih besar sepenuhnya di dalam wadah, sehingga dimensi yang lebih kecil mungkin tidak menutupi sepenuhnya. Untuk memotong dimensi yang lebih besar, gunakanobject-fit: cover
Gabriel Grant
4
Bekerja untuk saya - dibandingkan dengan solusi @KevinD - ini TIDAK mengubah proporsi dalam kasus tepi. Bersulang!
Barnabas Kecskes
9
Akan lebih bagus ketika didukung penuh. Atm, baik IE maupun edge mendukungnya sayangnya.
Spektrum
2
Jika Anda ingin mengatur max-width dan max-height, Anda bisa melakukannya. Bekerja dengan sempurna.
Sandip Subedi
3
Tampaknya yang tidak dapat digunakan dengan IE11 dan tepi 14/15 meskipun -> caniuse.com/#search=object-fit
mcorbe
106

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.

Neil
sumber
2
Apakah hanya saya atau ada beberapa kesalahan dalam posting ini? "'berbentuk potret' atau keduanya 'berbentuk lanskap' (masing-masing lebih lebar daripada tinggi, dan lebih tinggi dari lebar)" ... bukankah "rasa hormat" Anda harus dialihkan? Dan dalam poin-poin Anda 2. dan 3., keduanya mengatakan "Anda harus menetapkan width =" 100% "pada gambar". Saya kira Anda menyalin-tempel dan lupa untuk mengubah salah satu dari mereka menjadi "tinggi" daripada "lebar".
Buttle Butkus
Perbaiki saja. 2 dan 3 sekarang mungkin salah atau keduanya benar, bukannya salah dan salah benar. Saya tidak ingat apa jawaban yang benar. ;)
Neil
2
"Saat ini tidak ada cara untuk melakukan ini dengan benar dalam cara deterministik, dengan gambar berukuran tetap seperti file JPEG atau PNG."? Ini sepertinya salah. @ Thorn007 menjawab dengan cara seperti itu, dan saya telah menggunakannya sendiri - stackoverflow.com/questions/12259736/…
Dan Dascalescu
Jawaban @DanDascalescu Thorn007 tidak memperluas gambar jika lebih kecil dari wadah. Solusi terbaik saat ini adalah menggunakan elemen dengan gambar latar belakang dan set background-size: contain.
Kevin Borders
"Untuk mengubah ukuran gambar secara proporsional, Anda harus mengatur tinggi atau lebar menjadi" 100% ", tetapi tidak keduanya." <Inilah yang membantu saya. Terima kasih
Alexander Santos
77

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);
    }
Humble Rumble
sumber
1
CSS Bekerja persis seperti yang saya inginkan, dan saya melewatkan bit jQuery
bkwdesign
48

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.

Mehdi Maghrooni
sumber
2
Ini menyebabkan rasio gambar berubah di Google Chrome jika gambar sangat tinggi dan viewport pendek.
Mikko Rantalainen
29

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


Tapi satu harus menggunakan imgtag untuk menempatkan gambar seperti itu lebih baik daripada background-imagedalam hal SEO karena Anda dapat menulis kata kunci di altsatu imgtag. Jadi di sini Anda dapat membuat gambar responsif.

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

Siraj Alam
sumber
23

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

Chuck Dries
sumber
Saya percaya dengan "pas wadah div" OP berarti gambar tidak boleh melampaui elemen yang mengandung di kedua dimensi Dalam solusi @JonatasWalker, gambar dipangkas. Juga solusi latar belakang mungkin tidak benar secara semantik, tergantung pada situasinya. Misalnya, Anda mungkin perlu altnilai dan hal-hal semacam itu (meskipun Anda juga dapat menambahkan gambar tiruan yang tidak terlihat oleh teknologi non-asisten), atau Anda mungkin harus membuatnya dapat diklik.
Balázs
@ Balázs ah dalam hal ini pengaturan yang benar akan background-size: containdan saya pikir saya pribadi akan pergi rute gambar dummy hanya karena tidak ada cara yang benar-benar mudah untuk melakukan apa yang dijelaskan di sini tanpa JavaScript
Chuck Dries
@ ChuckDries Saya tidak begitu yakin apa yang Anda maksud, jawaban yang diterima memecahkan masalah.
Balázs
22

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;
}
dmitry
sumber
2
Ini tidak menangani gambar yang terlalu kecil.
Josh C
1
@ JoshC Apa maksudmu? Yang ini berfungsi dengan baik: codepen.io/petethepig/pen/maeFo
dmitry
2
404 pada gambar yang terlalu kecil.
Josh C
Saya ingin menunjukkan bahwa metode ini juga berfungsi dengan wadah dengan lebar variabel. Dmitry kerja yang luar biasa!
Camilo Martin
Sedikit modifikasi dan sempurna: codepen.io/anon/pen/BoQmBw Terima kasih Dmitry.
Alqin
10

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();
});
Nicolas BADIA
sumber
10

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%;
}
Miia Klingstedt
sumber
9

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.

Furqan Rahamath
sumber
8

Berikut ini berfungsi dengan baik untuk saya:

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

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

actimel
sumber
5

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.

AZD
sumber
5

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>
dan
sumber
5
<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>
mudah
sumber
2
Jika Anda dapat menambahkan beberapa penjelasan tentang kode Anda yang akan menyenangkan (saya tahu Anda memiliki beberapa komentar di sana tetapi hanya beberapa kata tentang mengapa / bagaimana jawaban ini, pertanyaannya akan membuatnya terlihat jauh lebih baik).
display-name-is missing
5

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;
}
Rick
sumber
5

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


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) };
});
jahu
sumber
Ada kekurangan untuk menggunakan metode ini. Jika gambar gagal dimuat, teks alternatif akan ditampilkan dengan wadah induk line-height. Jika teks alt memiliki lebih dari satu baris, itu akan mulai terlihat sangat buruk ...
jahu
5

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%;
}
Serkan KONAKCI
sumber
4

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;
}
gaborous
sumber
1
Apakah yang Anda maksudvh ? dan apa yang tidak berfungsi di Chrome?
misterManSam
@misterManSam Ya terima kasih banyak, terlalu lelah kemarin ketika saya memposting jawaban ini. max-height: xx%(unit persentase) tidak berfungsi di Chrome dengan beberapa elemen seperti img, tetapi vhunit tidak. Namun, persentase bekerja dengan height, width, max-width, dll
gaborous
4

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 .

bancer
sumber
4

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.
pengguna217447
sumber
1
Ini bukan solusi yang sangat andal jika Anda mencoba mendukung seluruh pasar. Saya menghindari CSS3 kecuali Anda akan memiliki semacam fallback untuk browser yang tidak mendukungnya.
dudewad
4

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

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

Gambar Bootstrap

HoangYell
sumber
3

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"
/>
pisang muda
sumber
3

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.

Billal Begueradj
sumber
1
Deklarasi CSS yang benar adalah 'max-height' daripada maxHeight dalam camel case.
Mark Townsend
3

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.

Mateo Marin
sumber
1

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>
pengguna2796283
sumber
1

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;
}
Joseph Lariosa
sumber
-1

Atau Anda cukup menggunakan:

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

Sekarang gambar akan mengambil semua ruang div.

Sharifur Robin
sumber
1
ini bukan tentang penyelarasan tentang mengubah ukurannya.
Baljeetsingh