CSS: 100% lebar atau tinggi sambil menjaga aspek rasio?


174

Saat ini, dengan STYLE, saya dapat menggunakan width: 100%dan autopada ketinggian (atau sebaliknya), tetapi saya masih tidak dapat membatasi gambar ke posisi tertentu, entah terlalu lebar atau terlalu tinggi.

Ada ide?


3
dapatkah Anda memposting tautan atau tangkapan layar untuk menunjukkan contoh masalah?
Mauro

Jawaban:


138

Jika Anda hanya menentukan satu dimensi pada gambar, rasio aspek gambar akan selalu dipertahankan.

Apakah masalah bahwa gambar lebih besar / lebih tinggi dari yang Anda inginkan?

Anda bisa meletakkannya di dalam DIV yang diatur ke tinggi / lebar maksimum yang Anda inginkan untuk gambar, dan kemudian atur overflow: hidden. Itu akan memotong apa pun di luar yang Anda inginkan.

Jika gambar 100% lebar dan tinggi: otomatis dan Anda pikir itu terlalu tinggi, itu terutama karena rasio aspek dipertahankan. Anda harus memotong, atau mengubah rasio aspek.

Harap berikan beberapa informasi lebih lanjut tentang apa yang ingin Anda capai secara khusus dan saya akan mencoba untuk membantu lebih banyak lagi!

--- EDIT BERDASARKAN UMPAN BALIK ---

Apakah Anda terbiasa dengan properti max-width dan max-height ? Anda selalu bisa mengaturnya. Jika Anda tidak menetapkan minimum dan Anda menetapkan tinggi dan lebar maks, maka gambar Anda tidak akan terdistorsi (rasio aspek akan dipertahankan) dan tidak akan lebih besar dari dimensi mana pun yang paling panjang dan mencapai maks.


16
jika gambar lebih tinggi daripada lebar, saya akan menggunakan tinggi = 100% dan lebar = otomatis, jika gambar lebih lebar daripada tinggi, saya akan menggunakan lebar = 100%, tinggi = otomatis. saya tidak pernah tahu apa masalahnya? memotong dengan tinggi / lebar maks akan bekerja- tetapi jika ada cara untuk tidak- saya lebih suka menggunakannya ...
Weston Watson

2
Nah, apakah Anda merancang tata letak cairan atau lebar tetap? Jika Anda berada dalam tata letak lebar tetap, Anda selalu dapat mengatur lebar Anda menjadi 100% dan gambar akan menskala dengan tepat, tetapi mungkin sangat tinggi. Apakah Anda mencoba memposisikan gambar dalam blok teks, atau menggunakannya sebagai spanduk, atau sebagai latar belakang? Jika Anda dapat menunjukkan halaman tempat Anda berencana menggunakannya atau menggambarkan konteksnya, saya dapat membantu Anda lebih banyak. Lihat hasil edit di atas juga.
Andrew

menggunakan max-height pada img saya memungkinkan saya membatasi gambar sambil menjaga rasio aspek mereka
northamerican

2
object-fittidak digunakan?
LeeGee

77

Beberapa tahun kemudian, mencari persyaratan yang sama, saya menemukan opsi CSS menggunakan ukuran latar belakang.

Seharusnya berfungsi di browser modern (IE9 +).

<div id="container" style="background-image:url(myimage.png)">
</div>

Dan gayanya:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Referensi: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Dan demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size


3
solusi ideal, yang sayangnya tidak didukung oleh IE8 :(
japrescott

Ini adalah solusi ideal, tetapi jika Anda melakukan ini di komidi putar, itu menyebabkan gambar menjadi kosong selama satu detik setelah setiap slide.
kloddant

58

Dengan mengatur max-widthproperti CSS ke 100%, gambar akan mengisi lebar elemen parenting itu, tetapi tidak akan membuat lebih besar dari ukuran sebenarnya, sehingga menjaga resolusi.

Mengatur heightproperti untuk automempertahankan rasio aspek gambar, menggunakan teknik ini memungkinkan ketinggian statis ditimpa dan memungkinkan gambar melentur secara proporsional ke segala arah.

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

1
belum heightauto
diatur

42

Solusi kerja sederhana yang elegan:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

3
Terima kasih telah mengingatkan saya tentang object-fit. Apa yang saya butuhkan.
Ash Clarke

5
Ini adalah solusi yang ideal, tetapi sayangnya object-fittidak didukung dalam versi IE atau Edge pada 28 Maret 2017.
Simon G

2
Pada Maret 2019 fitur ini memiliki dukungan 90% - jadi ini benar-benar harus dianggap sebagai jawaban yang benar.
Hampus Ahlgren

Juga, perhatikan itu object-fit: containdan object-fit: coverjangan suka widthseperti 100% - Anda harus menggunakan unit konkret sepertipx
FlameStorm

Saya mencoba object-fitdengan max-widthdan max-heightseperti yang digunakan dalam jawaban lain, tetapi itu tidak berhasil. ini bekerja sempurna untuk ukuran gambar acak bahkan dengan widthdanheight 100%
Halfacht

27

Punya masalah yang sama. Masalahnya bagi saya adalah bahwa properti ketinggian juga sudah didefinisikan di tempat lain, memperbaikinya seperti ini:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Persis apa yang saya cari. Terima kasih sejuta pria.
London Smith

Sempurna di mana ukuran gambar bisa lebih kecil atau lebih besar dari div induk, dan itu akan diubah ukurannya menjadi pusat sempurna dengan lebar maksimum ATAU tinggi maksimum. Anda tidak harus menggunakan gambar sebagai latar belakang yang hanya akan memenuhi sampai melimpahi orang tua jika diatur ke "cover".
Rehmat

9

Solusi sederhana:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

Omong-omong, jika Anda ingin memusatkannya dalam wadah div induk, Anda dapat menambahkan properti css tersebut:

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

Ini harus benar-benar berfungsi seperti yang diharapkan :)


terbalik bagian pertama. bagian kedua tidak bekerja untuk saya ... :(
Vikas Bansal

Hanya satu masalah - jika gambar lebih besar dari 100% dari wadah, itu akan tumpah dan akan membutuhkan scrollbar atau memotong. Tidak yakin, bagaimana mencapai yang sama dan masih membatasi ukuran maks ke wadah. Jika mengatur lebar dan tinggi maks, itu tidak mempertahankan rasio aspek lagi.
JustAMartin

5

Salah satu jawaban termasuk ukuran latar belakang: berisi pernyataan css yang sangat saya sukai karena ini adalah pernyataan langsung tentang apa yang ingin Anda lakukan dan browser hanya melakukannya.

Sayangnya cepat atau lambat Anda akan perlu menerapkan bayangan yang sayangnya tidak akan cocok dengan solusi gambar latar belakang.

Jadi katakanlah Anda memiliki wadah yang responsif tetapi memiliki batas yang ditentukan dengan baik untuk lebar minimum dan lebar minimum.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

Dan wadah memiliki gambar yang harus menyadari piksel ketinggian wadah untuk menghindari mendapatkan gambar yang sangat tinggi yang meluap atau terpotong.

Img juga harus menentukan lebar-maks 100% agar pertama-tama memungkinkan lebar yang lebih kecil untuk dirender dan kedua berdasarkan persentase yang menjadikannya parametrik.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Perhatikan bahwa bayangannya bagus;)

Nikmati contoh langsung di biola ini: http://jsfiddle.net/pligor/gx8qthqL/2/


Ceria - persis apa yang saya cari.
Eli

Terima kasih atas solusi dan tautan jsdfiddle ini. Ini sebenarnya bekerja untuk galeri reaksi-gambar saya di mana saya menggunakan keduanya: gambar dengan tinggi lebih besar dan gambar dengan lebar lebih besar. :)
Eugenijus S.

4

Saya menggunakan ini untuk wadah persegi panjang dengan tinggi dan lebar tetap, tetapi dengan gambar dengan ukuran yang berbeda.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

3

Yang terbaik untuk menggunakan otomatis pada dimensi yang harus menghormati aspek rasio. Jika Anda tidak menyetel properti lain ke otomatis, sebagian besar browser saat ini akan menganggap bahwa Anda ingin menghormati aspek rasio, tetapi tidak semuanya (IE10 pada windows phone 8 tidak, misalnya)

width: 100%;
height: auto;

2

Ini adalah solusi yang sangat mudah yang saya buat setelah mengikuti tautan conca dan melihat ukuran latar belakang. Itu meniup gambar ke atas dan kemudian memasangnya di tengah wadah luar tanpa menskalanya.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

Solusi yang bagus dan cerdas! Dengan tambahan 40% Anda mengompensasi rasio aspek. Terima kasih!
Sascha

Anda juga bisa menggunakannya background-size: contain;untuk menyesuaikan gambar ke latar belakang.
Simon G

1

Bukan untuk melompat ke masalah lama, tapi ...

#container img {
      max-width:100%;
      height:auto !important;
}

Meskipun ini tidak tepat saat Anda menggunakan! Override penting pada ketinggian, jika Anda menggunakan CMS seperti WordPress yang menetapkan tinggi dan lebar untuk Anda, ini bekerja dengan baik.


1

Saat ini satu dapat menggunakan vwdan vhunit, yang mewakili 1% dari v iewport ini w idth dan h delapan masing-masing.

https://css-tricks.com/fun-viewport-units/

Jadi, misalnya:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... akan membuat gambar selebar mungkin, mempertahankan rasio aspek, tetapi tanpa lebih lebar atau lebih tinggi dari 100% dari viewport.


0

Gunakan JQuery atau lebih, karena CSS adalah kesalahpahaman umum (pertanyaan dan diskusi yang tak terhitung jumlahnya di sini tentang tujuan desain sederhana menunjukkan itu).

Tidak mungkin dengan CSS untuk melakukan apa yang Anda inginkan: gambar harus memiliki lebar 100%, tetapi jika lebar ini menghasilkan ketinggian yang terlalu besar, maka max-height akan berlaku - dan tentu saja proporsi yang benar harus diawetkan.


-2

Saya pikir ini yang Anda cari, saya mencari sendiri, tetapi kemudian saya ingat lagi sebelum saya menemukan kode.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

evolusi digital sedang dalam perjalanan.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.