Question

我有一张高分辨率的图像（width: 5540px, height: 2680px），我需要这个图像覆盖整个div（这个div是全宽和80％的高度）。此图像显示在分辨率为768px至1600px的屏幕上。

当我使用background-size: cover时，图像会全宽，但底部会被切掉。

当我使用background-size: contain时，图像会调整大小以适合高度，但宽度并未完全填充。

当我使用background-size: 100%时，图像会填满整个div，但会伸展开来。

有没有办法做到这一点，或者我是否需要调整图像大小（例如，将图像调整为1600px（宽度），因为此图像仅显示在宽度为768px到1600px的屏幕上）？

Answer 1

您可以使用Image Liquid js。 https://github.com/karacas/imgLiquid

希望它能帮到你......

Answer 2

使用图像填充div而不拉伸

使用此方法可以轻松拟合图像

将这些代码行放入图像框css类

nums[-f:] + nums[:-f]

object-fit: cover;
height: 300px;
width: 270px;
object-position: center center;

.gallery-section .inner-width .container{
	width: 1280px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	left: 10%;
	right: 10%;
	margin: auto;
}

.gallery-section .inner-width .container .box{
	position: relative;
	width: 270px;
	height: 300px;
	background: #277bde;
	margin: 3px;
	box-sizing: border-box;
	display: inline-block; 
	background-size: cover;
	background-repeat: round;
	margin: auto;
	margin-top: 10px;object-fit: cover;


}

.gallery-section .inner-width .container .box .imgBox{
	position: relative;
	overflow: hidden;

}

.gallery-section .inner-width .container .box .imgBox img{  /*this is the code for fitting image*/
	object-fit: cover;
	height: 300px;
	width: 270px;
	object-position: center center;

}

Answer 3

由于图片宽度高于高，请将高度设置为100%，将宽度设置为auto：

background-size: auto 100%;

基本示例：

＆＃13;

body,
html {
  margin: 0;
}

div {
  height: 100vh;
  width: 100vw;
  background: url('http://lorempizza.com/1000/600') scroll no-repeat center;
  
  /* Set it to be 100% height, with an auto width */
  background-size: auto 100%;
}

＆＃13;

<div></div>

＆＃13;

如果是相反的方式，高度比宽度大，那么你只需要切换它们：

background-size: 100% auto;

Answer 4

如果您的原始图像是5540x2680px，您可能应该首先手动调整大小，因为如果您想以最大值显示它，那么只需加载很多。 1600px宽度。

然后调整大小取决于图像的内容。由于你提到的比率几乎相似，我猜你最好的选择是使用background-size：覆盖并使用background-position属性重新定位它。

例如

background-position: center bottom;

因为你提到底部被切断了。

Answer 5

这是经过测试的有效解决方案。

您需要的是：

父div为：

position: relative; overflow: hidden;

图片：

img {
  bottom: -5000px;
  left: -5000px;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  right: -5000px;
  top: -5000px;
}

无论如何都会使图像居中并保持其比例。请请不要使用宽度为5540px，高度：2680px 的图像，除非这是您放置它的容器的大小。 它会大大增加您的网页加载量并将其视为不良做法。更好地将图片调整为所需大小。

用图像填充div而不拉伸

5 个答案:

使用图像填充div而不拉伸