时间戳

首页 > 解决方案 > CSS在窗口调整大小时调整div和div内的图像

css - CSS在窗口调整大小时调整div和div内的图像

问题描述

我有一个 div，其中有几个图像并排排列。假设我在这个例子中连续有 7 个。

现在，当我调整浏览器的大小时，我希望它们保持彼此相邻的同一行，并相应地调整它们的高度和宽度。

我该怎么办？

当前示例

<div>
    <img src=“img1.jpg” />
    <img src=“img2.jpg” />
    <img src=“img3.jpg” />
    <img src=“img4.jpg” />
    <img src=“img5.jpg” />
    <img src=“img6.jpg” />
    <img src=“img7.jpg” />
<\div>

标签： css

解决方案

尝试这个：

div { display: grid; grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)) }
  img { width: 100%; height: auto; }
<div>
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
</div>

解释：

display: grid是 CSS 布局技术的最新补充，也是最优雅的。它在常青浏览器中得到广泛支持，所以一切都很好。

grid-template-columns: repeat(auto-fit, minmax(1px, 1fr))找到一种方法以适应整个宽度的 1 分之一（随容器大小而变化，如果将其放置在空页面中，也会随屏幕大小而变化），最小为 1px 并自动适应整个宽度，每个图像。

width: 100%需要确保图像不歪斜。

height: auto如果您想使用具有宽度和高度属性的完整 IMG 标记（如果您不构建 HTTP/2 兼容站点，由于性能问题，我完全推荐）或者如果您编辑高度，则具有相同的抗扭曲功能不小心使用了其他一些 CSS。

顺便说一句，无论您在这里有多少图像，这都有效，因此无需每次都更改分数或百分比！

最后一件事：当你有任何类型的列表时，如果我是你，我会用<div>or<ul>如果<ol>我是你的话，并且<li>像这样传播 s 需要更多的 CSS 魔法，但需要更多的语义 DOM。

图片来源：IMDB。

推荐阅读