制作响应式网站，但图像出来太小？

Question

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

我正在创建一个响应式网站，我被标题图像卡住了。在桌面上，它看起来很好。当我使用移动设备时，我喜欢它的大小，但是图像从容器中跳出来，显示了一个水平滚动条。我尝试（overflow-x：隐藏；）它做了隐藏滚动条的工作，但它最终在移动视图中弄乱了图像。

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

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

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

Answer 1

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

更多参考的来源：将一个未知大小的大图像放在一个较小的div中，并隐藏溢出

Answer 2

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

div {
    overflow-x: hidden;
}

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

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">