html - 使图像响应

Question

我有这个网页https://www.simplystraight.in/bulletin-board.html。现在笔记本电脑或任何大屏幕上的图像都非常大，在移动设备上它们的尺寸非常完美。所以，我希望这些图片在平板电脑或笔记本电脑中变小，在移动设备中保持相同大小。FIY 图像的宽度和高度现在是 100%。

标签： htmlcssresponsive-designresponsive-images

Answer 1

使用媒体查询在桌面和移动设备上设置大小

img {
  width: 300px;
}

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

<img src="https://www.simplystraight.in/bb2.png">
<img src="https://www.simplystraight.in/bb3.png">