html - 在表格中堆叠图像

Question

我刚刚开始通过 Dreamweaver 学习基本的 HTML/CSS。

这是一个相当简单的问题(我认为)。

我在一个表格中有两张图片。

图像响应大小变化。但是，(我以前做过，但不记得是怎么做的) - 如何让一张图片堆叠在另一张图片之上；一旦屏幕分辨率下降到更小的尺寸？

代码如下:

Answer 1

所以我猜你有两张图片彼此相邻，当屏幕变小时，它们必须是一张在另一张上面。您可以通过 CSS 媒体查询来做到这一点。首先，您将图像彼此相邻。所以它们可能类似于 width: 50%。但是您可以做的是添加媒体查询 @media screen and (max-width: 500px) 并且在该查询中您可以将图像设置为 width: 100%。查看下面的链接以获取有关媒体查询的更多信息:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

img {
    width: 50%;
}

@media screen and (max-width: 500px) {
    img {
        width: 100%;
    }
}