Question

我使用对象拟合包含将图像推入一个较小的div中。当减小浏览器窗口的宽度时，图像保持宽高比，但是显示的图像部分开始被剪切，而不是均匀地调整大小/缩小。

有没有一种方法可以使用对象拟合功能，而当窗口宽度减小时，图像的一部分不会被切除？

*{
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

.container{
	height: auto;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.holder{
	height: 400px;
	width: 33.33%;
	padding-left: 5px;
	margin-top: 5px;
}

.last{

	padding-right: 5px;
}

img{
	object-fit: cover;
	object-position: 35% 25%;
	height:100%;
	width:100%;
}

<!DOCTYPE html>
<html lang="en"> 
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<link rel="stylesheet" type="text/css" href="style/style.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="script/javascript.js"></script>
	<title> </title>
</head>

<body>
	
<div class="container">

	<div class="holder">
		<img src="https://picsum.photos/1920/660">
	</div>

	<div class="holder">
		<img src="https://picsum.photos/1920/660">
	</div>

	<div class="holder last">
		<img src="https://picsum.photos/1920/660">
	</div>

	<div class="holder">
		<img src="https://picsum.photos/1920/660">
	</div>

	<div class="holder">
		<img src="https://picsum.photos/1920/660">
	</div>

	<div class="holder last">
		<img src="https://picsum.photos/1920/660">
	</div>

</div>


<img src="https://picsum.photos/1920/660">


</body>
</html>

Answer 1

尝试：

object-fit: contain;

代替掩盖

Answer 2

这应该可以完成工作：

*{
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.container{
  height: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.holder{
  /* height: 400px; */
  width: 33.33%;
  padding-left: 5px;
  margin-top: 5px;
}
.last{
  padding-right: 5px;
}
img{
  /* object-fit: cover; */
  object-fit: contain;
  object-position: 35% 25%;
  height:100%;
  width:100%;
}

<!DOCTYPE html>
<html lang="en"> 
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <title> </title>
  </head>
  <body>
    <div class="container">
      <div class="holder">
        <img src="https://picsum.photos/1920/660">
      </div>
      <div class="holder">
        <img src="https://picsum.photos/1920/660">
      </div>
      <div class="holder last">
        <img src="https://picsum.photos/1920/660">
      </div>
      <div class="holder">
        <img src="https://picsum.photos/1920/660">
      </div>
      <div class="holder">
        <img src="https://picsum.photos/1920/660">
      </div>
      <div class="holder last">
        <img src="https://picsum.photos/1920/660">
      </div>
    </div>
    <img src="https://picsum.photos/1920/660">
  </body>
</html>

Answer 3

尝试此代码，希望对您有帮助！

*{
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}
.container{
	height: auto;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
.holder{
	height: 400px;
	width: 33.33%;
	padding-left: 5px;
	margin-top: 5px;
}

.last{

	padding-right: 5px;
}
img{
     object-fit: cover;
    /* object-position: 35% 25%; */
    object-fit: fill;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

<body>	
<div class="container">
	<div class="holder">
		<img src="https://picsum.photos/1920/660">
	</div>
	<div class="holder">
		<img src="https://picsum.photos/1920/660">
	</div>
	<div class="holder last">
		<img src="https://picsum.photos/1920/660">
	</div>
	<div class="holder">
		<img src="https://picsum.photos/1920/660">
	</div>
	<div class="holder">
		<img src="https://picsum.photos/1920/660">
	</div>
	<div class="holder last">
		<img src="https://picsum.photos/1920/660">
	</div>
</div>
<img src="https://picsum.photos/1920/660">
</body>

适合对象的图像没有均匀缩小

3 个答案: