CSS

Question

我试图只为移动设备显示图像，但是当我调整浏览器或 select 不同移动设备的大小时，我的图像会调整大小，这不是我想要的。我使用 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，取全宽），什么会是让它看起来不错的建议吗？

Answer 1

Ok, so let's assume I'm trying to display the full image, keeping it's ratio - for every mobile device - in a grid (col-sm-10, taking it's full width), what would be the suggestions for making it look good?

使用background-size: contain

（此外，您可以使用背景色来填充 div 未被背景图像覆盖的区域。

CSS - 如何在不考虑视口大小的情况下保持完整图像可见？

CSS - How to keep full image visible regardless the viewport size?

html

image

cross-platform

viewport-units