html - Bagaimanakah CSS mengendalikan penskalaan imej?

Question

Struktur HTML
`<dl onclick="goDetail(1)" class="cookbook-list">
<dt class="cookbook-img"> .cdn.xiangha.com/cai...
</dt>
<dd class="cookbook-name">Pork Ribs Rice</dd>
<dd class="cookbook-des"> Tonify yang, menguatkan yang, menyuburkan buah pinggang, menyuburkan yin, menyuburkan buah pinggang, qi dan darah</dd></dl>`

.cookbook-list {
    display: block;
    height: 13.2rem;
}

.cookbook-list dt {
    width: 100%;
    height: 10rem;
    position: relative;
    overflow: hidden;
}
.cookbook-list img {
    width: 100%;

}

Imej dalam teg

img tidak dipaparkan sepenuhnya. Bagaimana saya boleh memaparkannya sepenuhnya mengikut perkadaran biasa?

Answer 1

Gunakan hubungan peratusan, prinsip: p>img，其中 p 标签为相对定位，高度为一个百分比，img Gunakan kedudukan mutlak untuk mengisi objek induk, kodnya adalah seperti berikut:

/* 图片等比缩放 */
.scaling {
    background-color: #fafafa;
    font-size: 0;
    height: 0; // 去除高度
    position: relative;
}
.scaling > img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
/* 图片等比缩放 */
.scaling.scaling-4-3 {
    padding-bottom: 75%; /* (300/400)*100 (高度/宽度)*100 得出比例 */
}

Lebar ditentukan berdasarkan lebar sebenar Bergantung pada halaman anda, lebarnya hendaklah lebar skrin atau lebar bekas induknya secara berkadar.

Answer 2

img{
paparan: blok;
lebar maksimum: 100%;
}

Answer 3

Muat imej dengan latar belakang
dan kemudian tetapkan
saiz latar belakang:mengandungi
latar belakang-ulang: tiada ulang

Answer 4

Gunakan susun atur rem, yang akan berubah mengikut saiz skrin

Answer 5

Tambah img gaya{width:100%;} pada imej

Answer 6

• Susun atur halaman

  <p style=“width: 100%; overflow: hidden”>
      <img style="width: 100%" src="images/1.jpg" >
  </p>
  

• Lebar elemen induk ditentukan mengikut peratusan atau lebar Apabila img diproses hingga 100%, ia akan mengisi tetingkap induk secara automatik. Jika digunakan, sila asingkan gaya css

Unsur

img secara amnya disertakan dalam kotak, terutamanya untuk memudahkan operasi dan pemilihan.