Question

如何使图像始终具有相同的裁剪高度。如在此网站上http://deliciousproductions.com.au/，div高420像素。但图像进一步扩展。

这是div

<div class="dpsplash">
</div>

CSS

.dpsplash {
    background-image: url('/img/banner1.png');  
    background-size: auto 800px;
    height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
}

所以它的作用是使图像高度，以便当您水平调整页面大小时，它不会移动您为div高度裁剪图像的点，而是扩展宽度。 Buuuut我们遇到了一个问题，因为我必须在更大的分辨率下猜测全宽度图像的图像高度，如果以全宽度显示图像将不会短于400像素，因为如果2500x1200图像以全宽度显示在电话，它会在div之前结束，看起来很难看。

我觉得在数学/ javascript中它应该是[（当前页面宽度）/（图像宽度）] *（图像高度）=（它需要的高度）或x，所以背景大小样式应该是background-size: auto (that formula from above?);

我基本上不知道Javascript，它太混乱但我理解逻辑论证。

Answer 1

你的意思是background-size: cover;？它的作用（source）：

将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

Answer 2

是的，我并不完全确定你在问什么，而你的评论对我来说并不是特别清楚。

我所取出的就是你希望图像在更高分辨率的屏幕上看起来相似或相同？首先，如果你想测试你可以缩小你的浏览器，以估计在更高的dpi屏幕上的样子。还有一个移动模拟器作为Chrome的开发工具的一部分，可以模拟更高的dpi。

关于你的问题，如果问题是如何保持宽高比以及将图像保持在100％宽度超过1080p，一个简单的解决方案是添加一个强制宽度超过100％的媒体查询屏幕宽度为1920像素。这看起来像width: 100%;。如果这看起来并不完全正确，您可以尝试将宽度设置为100％，其值为150％，这样它就会占用与之前类似的大小部分。如果这不是您的问题，并且您希望图像随dpi缩放，请尝试使用值vh和vw来完成此操作。它们代表视口的高度和宽度。您还可以使用max-height/width和vmin/max

设置最大宽度，高度，vw和vh

如何使背景图像尺寸高度始终等于全宽图像所需的图像高度？

2 个答案: