css 尝试在单个列中缩放图像以适应更窄的屏幕

oxcyiej7  于 2023-05-02  发布在  其他
关注(0)|答案(1)|浏览(112)

我有一个非常简单的中心网页与可点击的图像788x335像素。他们将自动排序自己到3列,2列,然后1列时,我减少屏幕大小horitontally。但是我不知道如何在最后的1列视图中缩放图像,对于移动的。目前,它们只显示在一列列表中,但以全尺寸裁剪。

CSS

.grid-test {
display: grid;
grid-template-columns: repeat(auto-fill, 788px);
justify-content: center; 
}

HTML

<div class="grid-test">
    <img src="1.jpg">
            <img src="2.jpg">
            <img src="3.jpg">
            <img src="4.jpg">
            <img src="5.jpg">
            <img src="6.jpg">
            <img src="7.jpg">
            <img src="8.jpg">
            <img src="9.jpg">
     </div>
xt0899hw

xt0899hw1#

我会尝试使用aspect-ration属性。
文件:https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
浏览器支持:https://caniuse.com/?search=aspect-ratio

.grid-test {
  display: grid;
  grid-template-columns: repeat(auto-fill, 788);
  justify-content: center;
}

.grid-test img {
    width: 100%;
    aspect-ratio: auto;
}
<div class="grid-test">
  <img src="https://picsum.photos/800/700">
  <img src="https://picsum.photos/800/600">
  <img src="https://picsum.photos/800/500">
  <img src="https://picsum.photos/800/400">
  <img src="https://picsum.photos/800/500">
  <img src="https://picsum.photos/800/600">
  <img src="https://picsum.photos/800/700">
  <img src="https://picsum.photos/800/800">
</div>

相关问题