制作响应式网站但图像太小？答案

【问题标题】：Making responsive website but image coming out too small?制作响应式网站但图像太小？
【发布时间】：2018-10-31 07:59:39
【问题描述】：

我是编码新手，需要帮助。

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

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

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

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

【问题讨论】：

你需要在某处设置overflow-x: hidden;，但是没有你的代码就不可能告诉你在哪里。

标签： html css mobile responsive desktop

【解决方案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">

【讨论】：

请解释src、srcset 和sizes 的作用（或提供文档链接），以便问题作者更好地理解您的回答为何有用

【解决方案2】：

如果您使用背景图片，则使用这些 css 规则来保持所有图片的一致性

div {
    overflow-x: hidden;
}

div.img {
    background-position: center; // or give top center based on your need
}

【讨论】：

【解决方案3】：

我认为left: -50% 可能有助于使图像居中：

/* the div outside */
.mobile {
  border: 1px solid black;
  width: 500px; /*size of the mobile screen*/
  height:1500px;
  overflow-x: hidden;
}
/* bottle img */
.bottle{
  left: -50%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  background-position: center;
}

在我的测试中的效果：

【讨论】：