对象拟合图像不均匀收缩答案

【问题标题】：Object fit image not shrinking evenly对象拟合图像不均匀收缩
【发布时间】：2019-01-10 09:53:36
【问题描述】：

我使用 object fit contains 将图像推入一个更小的 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>

【问题讨论】：

你可以试试object-fit:fill;在给定宽度的 div 中占据整个图像

标签： html css

【解决方案1】：

试试：

object-fit: contain;

代替封面

【讨论】：

我考虑过，但我希望图像保持 div 的纵横比，认为可能有解决方法或其他东西

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：