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

oxcyiej7 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(111)

我有一个非常简单的中心网页与可点击的图像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>

css

来源：https://stackoverflow.com/questions/76056725/trying-to-scale-images-in-the-single-column-for-narrower-screens

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-05-02

我来回答

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

1条答案

相关问题

热门标签

最新问答