html - 制作响应式网站但图像太小？

Question

我对编码很陌生，需要帮助。

我正在创建一个响应式网站，但我被标题图片卡住了。在桌面上，它看起来不错。当我使用移动设备时，我喜欢它的大小，但图像会脱离容器并显示一个水平滚动条。我尝试了 (overflow-x: hidden;) ，它完成了隐藏滚动条的工作，但最终弄乱了移动视图中的图像。

然后我给图像容器设置了 100% 的宽度，它完全适合屏幕，没有水平条，但是图像太小了。

我想知道如何让图像保持不变但适合容器？

我附上了一张图片以进一步解释我在说什么。谢谢！

标签： htmlcssmobileresponsivedesktop

Answer 1

您可以使用 srcset html 代码。这很简单。

<img srcset="image.jpg 320w, image.jpg 480w, image.jpg 800w"
 sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
 src="image.jpg" alt="Image">