制作响应式网站，但图片太小？

Question

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

我正在创建一个响应站点，但我一直停留在标题图像上。在桌面上，看起来不错。当我使用移动设备时，我喜欢它的大小，但是图像从容器中弹出并显示了水平滚动条。我尝试了（overflow-x：hidden;）来完成隐藏滚动条的工作，但最终弄乱了移动视图中的图像。

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

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

我附上一张图片，以进一步说明我在说什么。谢谢！

Answer 1

如果您使用的是背景图片，请使用这些CSS规则使所有图片保持一致

div {
    overflow-x: hidden;
}

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

Answer 2

我认为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;
}

在我的测试中的效果：

以及更多参考资料的来源： Center a large image of unknown size inside a smaller div with overflow hidden

Answer 3

您可以使用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">