我试图只为移动设备显示图像，但当我调整浏览器大小或选择不同的移动设备时，我的图像会调整大小，这不是我想要的。我使用vh单位，所以我的图像在所有宽度上看起来都一样。以下是片段：
#main-pic {
border: 2px solid red;
background-image: url(https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
height: 55vh;
min-width: 100%;
background-size: cover;
background-repeat: no-repeat;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="main-pic"></div>
</body>
</html>在我的真实项目中，这张照片在Bootstrap网格中，我使用@media查询来指定设备的宽度。
编辑：为了澄清，我想显示完整的图像，无论它的屏幕大小是
编辑2：好吧，假设我正在尝试显示完整的图像，并将其比例(对于每个移动设备(保持在网格中(col-sm-10，取其全宽(，有什么建议可以让它看起来好看？
好吧，假设我正在尝试显示完整的图像网格中每个移动设备的比率(col-sm-10，取全宽(，有什么建议可以让它看起来好看？
使用background-size: contain
(此外，您可以使用背景色填充背景图像未覆盖的div区域(。