Bagaimana cara mengatur lebar dan tinggi gambar tanpa meregangkannya?

Jika saya memiliki:

#logo {
    width: 400px;
    height: 200px;
}

kemudian

<img id="logo" src="logo.jpg"/>

akan meregang untuk mengisi ruang itu. Saya ingin gambar tetap dalam ukuran yang sama, tetapi untuk mengambil banyak ruang di DOM. Apakah saya harus menambahkan enkapsulasi <div>atau <span>? Saya benci menambahkan markup untuk gaya.

Ya, Anda membutuhkan div encapsulating:

<div id="logo"><img src="logo.jpg"></div>

dengan sesuatu seperti:

#logo { height: 100px; width: 200px; overflow: hidden; }

Solusi lain (padding, margin) lebih membosankan (karena Anda perlu menghitung nilai yang tepat berdasarkan dimensi gambar) tetapi juga tidak secara efektif mengizinkan container lebih kecil dari gambar.

Selain itu, hal di atas dapat diadaptasi dengan lebih mudah untuk tata letak yang berbeda. Misalnya, jika Anda menginginkan gambar di kanan bawah:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Jawaban 2017

Objek CSS cocok bekerja di semua browser saat ini. Ini memungkinkan imgelemen menjadi lebih besar tanpa meregangkan gambar.

Anda dapat menambahkan object-fit: cover;ke CSS Anda.

Muat gambar sebagai background untuk div.

Dari pada:

<img id='logo' src='picture.jpg'>

melakukan

<div id='logo' style='background:url(picture.jpg)'></div>

Semua browser akan memotong bagian gambar yang tidak pas.
Ini memiliki beberapa keunggulan dibandingkan membungkusnya dengan elemen yang luapannya tersembunyi:

1. Tidak ada markup ekstra. Div hanya menggantikan img.
2. Pusatkan atau atur gambar dengan mudah ke offset lain. misalnya.url(pic) center top;
3. Ulangi gambar jika cukup kecil. (Oke, tidak tahu mengapa Anda menginginkan itu)
4. Setel warna bg dalam pernyataan yang sama, terapkan gambar yang sama dengan mudah ke beberapa elemen, dan semua yang berlaku untuk gambar bg.

Update: Jawaban ini dari before object-fit; Anda sekarang mungkin harus menggunakan object-fit / object-position.

Ini masih berguna untuk browser lama, untuk properti tambahan (seperti background-repeat), dan untuk kasus edge (Misalnya, mengatasi bug Chrome dengan flexbox dan object-position dan masalah FF (sebelumnya?) Dengan grid + autoheight + object- fit. Div pembungkus di grid / flexbox sering memberikan ... hasil yang tidak intuitif.)

Objek-fit CSS3

Saya tidak yakin seberapa jauh penerapannya oleh webkit, IE, dan firefox. Tapi Opera bekerja seperti sihir

object-fitberfungsi dengan konten SVG, tetapi efek yang sama juga dapat dicapai dengan menyetel preserveAspectRatio=""atribut di SVG itu sendiri.

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Chris Mills mendemonstrasikannya di sini http://dev.opera.com/articles/view/css3-object-fit-object-position/

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

Buat div dan berikan kelas. Lalu jatuhkan img di dalamnya.

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

Setel ukuran div Anda dan buat itu relatif.

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

lalu atur gaya gambar Anda

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

Semoga membantu

Anda dapat menggunakan seperti di bawah ini:

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

Apakah saya harus menambahkan <div> atau <span> yang merangkum?

Saya pikir Anda melakukannya. Satu-satunya hal yang terlintas dalam pikiran adalah padding, tetapi untuk itu Anda harus mengetahui dimensi gambar terlebih dahulu.

Anda dapat mencoba mengatur bantalan daripada tinggi / lebar.

Yang terpikir oleh saya adalah meregangkan lebar atau tinggi dan membiarkannya mengubah ukurannya dalam aspek rasio. Akan ada ruang putih di samping. Sesuatu seperti bagaimana layar lebar menampilkan resolusi 1024x768.

Jika menggunakan flexbox adalah opsi yang valid untuk Anda (tidak perlu mendukung browser lama), periksa jawaban saya yang lain di sini (yang mungkin merupakan duplikat dari yang ini):

Pada dasarnya Anda perlu membungkus tag img Anda dalam div dan css Anda akan terlihat seperti ini:

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

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

Ini pertanyaan yang cukup lama, tetapi saya memiliki masalah menjengkelkan yang sama persis di mana semuanya bekerja dengan baik untuk Chrome / Edge (dengan properti objek-fit) tetapi properti css yang sama tidak berfungsi di IE11 (karena tidak didukung di IE11), saya akhirnya menggunakan elemen "gambar" HTML5 yang memecahkan semua masalah saya.

Saya pribadi tidak menggunakan tag DIV luar karena itu tidak membantu sama sekali dalam kasus saya, jadi saya menghindari DIV luar dan hanya diganti dengan elemen 'gambar'.

Kode di bawah ini memaksa gambar untuk diperkecil / diperkecil dengan baik (tanpa mengubah rasio aspek asli).

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

dan kelas css:

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}