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

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?

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.

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

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

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

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

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

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/

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

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;

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

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.

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.

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.

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.