如何在Y軸和X軸CSS中調整圖片大小-有解無憂

我目前正在嘗試以 HTML 格式顯示一組圖片。因為我是這個話題的新手。現在我想做的是根據當前視窗大小調整圖片大小，但保持縱橫比。我嘗試了很多方法，例如寬度：自動和高度：自動。他們都沒有正常作業。我能做到的最好的事情是改變 x 軸上的圖片大小。但它總是會切掉 Y 軸上的圖片。我想確保整個內容在任何給定時間都在視窗大小上。我還想確保 5 張圖片彼此相鄰。

.image {
  position: top-left;
  object-fit: cover;
  height: 19%;
  width: 19%;
}

<div id="container">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
</div>

uj5u.com熱心網友回復：

根據元素的數量對任何專案使用grid最大高度vh和最大寬度：vw

#container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    max-height: 100vh;
    max-width: max-content;
}
.image {
    max-width: 20vw;
    max-height: 33.33vh;
}

<div id="container">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
    <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
    <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
</div>

當螢屏尺寸很寬時：

如何在 Y 軸和 X 軸 CSS 中調整圖片大小

當 Y 軸收縮時：

如何在 Y 軸和 X 軸 CSS 中調整圖片大小

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/434321.html

標籤：html css

上一篇：html-子元素超過了帶有flexbox的父元素

下一篇：css問題表設計