107

Saya telah mencoba selama beberapa hari sekarang untuk mengkonfigurasi galeri thumbnail saya sehingga semua gambar muncul dengan tinggi dan lebar yang sama. Namun ketika saya mengubah kode Css menjadi,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Saya mendapatkan gambar yang semuanya berukuran sama tetapi rasio aspeknya melebar sehingga merusak gambar. apakah tidak ada cara untuk mengubah ukuran penampung gambar dan bukan gambarnya? memungkinkan saya untuk menjaga rasio aspek. tapi tetap mengubah ukuran gambar. (Saya tidak keberatan jika saya memotong beberapa gambar.)

Terima kasih sebelumnya!

— Beaniie
sumber

184

ini adalah masalah umum dengan pengubahan ukuran CSS, kecuali semua gambar memiliki proporsi yang sama, Anda tidak dapat melakukan ini melalui CSS.

Pendekatan terbaik adalah memiliki wadah, dan mengubah ukuran salah satu dimensi (selalu sama) gambar. Dalam contoh saya, saya mengubah ukuran lebarnya.

Jika wadah memiliki dimensi tertentu (dalam contoh saya lebar), saat memberi tahu gambar memiliki lebar 100%, itu akan membuatnya menjadi lebar penuh wadah. Pada autoketinggian akan membuat gambar memiliki tinggi proporsional dengan lebar baru.

Ex:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

— jackJoe
sumber

41

Anda perlu memperbaiki satu sisi (misalnya tinggi) dan mengatur sisi lainnya auto.

Misalnya

 height: 120px;
 width: auto;

Itu akan menskalakan gambar hanya berdasarkan satu sisi. Jika menurut Anda pemangkasan gambar dapat diterima, Anda dapat mengaturnya

overflow: hidden;

ke elemen induk, yang akan memangkas apa pun yang jika tidak melebihi ukurannya.

— Nick Andriopoulos
sumber

Saya sudah mencoba ini, tetapi masih memberi saya gambar dengan berbagai ukuran dan bentuk. Saya ingin galeri seragam seperti itu, [] [] [] [] tidak suka [] [] [] [] []

— Beaniie

2

gunakan kombinasi keduanya: atur tinggi ke angka (dengan lebar otomatis untuk menjaga skala), dan batasi induk ke lebar tertentu dengan overflow: hiddenmemotong kelebihannya

— Nick Andriopoulos

25

Anda dapat menggunakan object-fitproperti css3, seperti

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

Luaskan cuplikan

Namun, ini bukan jawaban Anda, karena tidak meregangkan wadah, tetapi berperilaku seperti galeri dan Anda dapat terus menata gaya imgitu sendiri.

Kelemahan lain dari solusi ini adalah masih kurangnya dukungan dari properti css3. Detail selengkapnya tersedia di sini: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . Solusi jQuery dapat ditemukan di sana juga.

— dmitry_romanov
sumber

Terima kasih, solusi yang bagus. :)

— Bibhu

Agak aneh menjawab dengan properti yang hanya didukung di opera atm ?! caniuse.com/object-fit

— Simon Dragsbæk

4

Saya mengerti maksud Anda, @Simon, terima kasih. Saya sebutkan saya tidak tahu apakah properti akan didukung di mana-mana, tetapi bahkan jika tidak , kami dapat menggunakannya sebagai titik awal ke google untuk alternatif yang menggantikannya. Alasan lain untuk memposting adalah bahwa jawabannya akan tetap ada untuk beberapa waktu sementara browser menjadi lebih baik setiap hari, jadi saya menjawab menargetkan ini dalam waktu dekat juga.

— dmitry_romanov

1

Datang ke halaman ini beberapa tahun kemudian, saya senang menemukan jawaban 'masa depan' ini!

— petzi

8

Untuk membuat gambar dapat disesuaikan / fleksibel, Anda dapat menggunakan ini:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

— Stanislav
sumber

5

Letakkan sebagai latar belakang dudukan Anda misalnya

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

Ini akan memusatkan gambar Anda di dalam div 120x120 yang memotong kelebihan gambar

— DickieBoy
sumber

2

Jika Anda tidak ingin meregangkan gambar, masukkan ke dalam wadah div tanpa overflow dan pusatkan dengan menyesuaikan marginnya jika diperlukan.

Gambar tidak akan dipotong
Rasio aspek juga akan tetap sama.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

— Bhushan Dangore
sumber

0

transform: scale(0.5);

Contoh:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

lihat: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

— Mahmoud K.
sumber

-1

Jika Anda mengetahui rasio spekt, Anda dapat menggunakan padding-bottom dengan persentase untuk mengatur tinggi tergantung dengan perbedaan.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

— reco
sumber

Mengubah ukuran gambar secara proporsional menggunakan CSS?

HTML:

CSS:

Contoh: