Question

场景：

我在获取图像以使其自动适应带有边框的flexbox时遇到麻烦。
图像将动态生成，因此有时宽度或高度可能较长。有时候，图片会比应放入的盒子小或大，但它应自动适合盒子的大小并保持适当的比例。

已尝试的情况：

我想出的最好办法是将图像的宽度和高度都设置为100％，然后使用object-fit: contain。
但是，object-fit: contain不能很好地使用边框。边框不仅围绕图像，而且围绕整个父div。
问题：：如果有一个很高的骨感图像，它可能会放大或缩小到30％的宽度和100％的高度。我希望边界也位于30％和100％区域。但是，边框被放置在宽度100％和高度100％的区域，这不是我想要的。

还有什么其他方法对我来说更好？

这是我的代码的简化视图：

 <!DOCTYPE html>
    <html>
    <style>
    html, body { width: 100%; height: 100% }
    #outer {
    	width: 100%; 
    	height: 100%;
    	display: flex;
    	background-color: green;
    	flex-direction: column
    }
    #top, #bottom {
    	flex: 1;
    	display: flex;
    	border: solid black 1px;	
    }
    #first, #third {
    	flex: 1;
    	background-color: blue;
    }
    #second {
    	flex: 3;
    	background-color: yellow;
    }
    #second img {
    	border: solid black 5px;
    	object-fit: contain;
    	width: 100%;
    	height: 100%;
        box-sizing: border-box;
    }
    </style>
    
    <body>
    <div id="outer">
    	<div id="top">
    		<div id="first">First</div>
    		<div id="second">
    			<img src="https://via.placeholder.com/350x800/faa">
    		</div>
    		<div id="third">Third</div>		
    	</div>
    	<div id="bottom">
    		Bottom
    	</div>
    </div>
    </body>
    </html>

如果运行上面的代码片段，您将看到粗边框围绕整个父区域（以黄色显示），而不是仅出现在图像本身（粉红色区域）周围。

我该怎么做才能使边框仅在图像本身周围？

说明

我需要满足以下条件的东西：

将较小的图像放大以符合父div的大小
将较大的图像按比例缩小以符合父div的大小
图像应成比例（即图像必须保持其纵横比且不失真）
图片应位于父div的中心
图片应仅在图片周围具有边框，而不能在较大区域内
代码必须同时适用于纵向和横向图像
在大多数情况下，图片的只有两面会接触父边界，而将父div的其余部分留空（即我的代码示例中的黄色背景）

考虑到CSS已经走了这么远，对此似乎没有简单的解决方案，我真的感到很惊讶。

Answer 1

已使用object-fit: cover 这样图像将覆盖整个父对象。
其他解决方案是插入已经有边框的图像。
可以在线编辑图像以在其自身上附加边框。

<!DOCTYPE html>
    <html>
    <style>
    html, body { width: 100%; height: 100% }
    #outer {
    	width: 100%; 
    	height: 100%;
    	display: flex;
    	background-color: green;
    	flex-direction: column
    }
    #top, #bottom {
    	flex: 1;
    	display: flex;
    	border: solid black 1px;	
    }
    #first, #third {
    	flex: 1;
    	background-color: blue;
    }
    #second {
    	flex: 3;
    	background-color: yellow;
    }
    #second img {
    	border: solid black 5px;
    	object-fit: cover;
    	width: 100%;
    	height: 100%;
        box-sizing: border-box;
    }
    </style>
    
    <body>
    <div id="outer">
    	<div id="top">
    		<div id="first">First</div>
    		<div id="second">
    			<img src="https://via.placeholder.com/350x800/faa">
    		</div>
    		<div id="third">Third</div>		
    	</div>
    	<div id="bottom">
    		Bottom
    	</div>
    </div>
    </body>
    </html>

更新的解决方案：
为此，我们可以将图像放入一个容器中根据图像获取高度和宽度。将此图像容器div放入主div容器中。
因此，在这种情况下，我们将以下代码放入#second修饰符中，并调整了相应的CSS以获得所需的结果。

html, body { width: 100%; height: 100% }
    
    img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    
        transform: translate(-50%, -50%);
        position: relative;
        left: 50%;
        top: 50%;
}
    #testing {
        display: inline-block;
        /* text-align: center; */
    }
    #outer {
    	width: 100%; 
    	height: 100%;
    	display: flex;
    	background-color: green;
    	flex-direction: column
    }
    #top, #bottom {
    	flex: 1;
    	display: flex;
    	border: solid black 1px;	
    }
    #first, #third {
    	flex: 1;
    	background-color: blue;
    }
    #second {
    	flex: 3;
    	background-color: yellow;
        display: flex;
        margin: 0 auto;
        justify-content: center;
    }
    #second img {
        border: solid black 5px;
        object-fit: contain;
        box-sizing: border-box;
    }

<!DOCTYPE html>
    <html>
    <body>
    <div id="outer">
    	<div id="top">
    		<div id="first">First</div>
    		<div id="second">
                <div id='testing'>
    		   
           <img src="https://via.placeholder.com/1000x350/faa">
                </div>
    		</div>
    		<div id="third">Third</div>		
    	</div>
    	<div id="bottom">
    		Bottom
    	</div>
    </div>
<div id="outer">
    	<div id="top">
    		<div id="first">First</div>
    		<div id="second">
                <div id='testing'>
    		   
           <img src="https://via.placeholder.com/350x1000/faa">
                </div>
    		</div>
    		<div id="third">Third</div>		
    	</div>
    	<div id="bottom">
    		Bottom
    	</div>
    </div>
    </body>
    </html>

Answer 2

只想要身高100％的人吗？如果高度不是100％取决于图像的属性，则可以使用object-fit：fill;和高度：自动；

<!DOCTYPE html>
    <html>
    <style>
    html, body { width: 100%; height: 100% }
    #outer {
    	width: 100%; 
    	height: 100%;
    	display: flex;
    	background-color: green;
    	flex-direction: column
    }
    #top, #bottom {
    	flex: 1;
    	display: flex;
    	border: solid black 1px;	
    }
    #first, #third {
    	flex: 1;
    	background-color: blue;
    }
    #second {
    	flex: 3;
    	background-color: yellow;
    }
    #second img {
    	border: solid black 5px;
    	object-fit: contain;
    	width: 100%;
    	height: auto;
      box-sizing: border-box;
    }
    </style>
    
    <body>
    <div id="outer">
    	<div id="top">
    		<div id="first">First</div>
    		<div id="second">
    			<img src="https://picsum.photos/800/800">
    		</div>
    		<div id="third">Third</div>		
    	</div>
    	<div id="bottom">
    		Bottom
    	</div>
    </div>
    </body>
    </html>

Answer 3

您的意思是这样的吗？

进行以下更改：将width: 100%和height: 100%移至父级，在img上添加max-height: 100%，并在父级上添加text-align: center

更新：
-在#second内添加另一个div
-使#second display: flex; flex-direction: column; justify-content: center
-将max-width: 100%添加到img -将max-height: 100%; max-width: 100%; height: fit-content;添加到添加的div

html, body { width: 100%; height: 100% }
    #outer {
    	width: 100%; 
    	height: 100%;
    	display: flex;
    	background-color: green;
    	flex-direction: column
    }
    #top, #bottom {
    	flex: 1;
    	display: flex;
    	border: solid black 1px;	
    }
    #first, #third {
    	flex: 1;
    	background-color: blue;
    }
    #second {
    	flex: 3;
    	background-color: yellow;
    	width: 100%;
    	height: 100%;
      text-align:center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #second img {
    	border: solid black 5px;
      box-sizing: border-box;
      max-height: 100%;
      max-width: 100%;
    }
    #vcenter{
      max-height: 100%;
      max-width: 100%;
      height: fit-content;
    }

<!DOCTYPE html>
    <html>
    <body>
    <div id="outer">
    	<div id="top">
    		<div id="first">First</div>
    		<div id="second">
          <div id="vcenter">
    			<img src="https://via.placeholder.com/350x800/faa">
          </div>
    		</div>
    		<div id="third">Third</div>		
    	</div>
    	<div id="bottom">
    		Bottom
    	</div>
    </div>
    </body>
    </html>

风景图片的相同代码

html, body { width: 100%; height: 100% }
    #outer {
    	width: 100%; 
    	height: 100%;
    	display: flex;
    	background-color: green;
    	flex-direction: column
    }
    #top, #bottom {
    	flex: 1;
    	display: flex;
    	border: solid black 1px;	
    }
    #first, #third {
    	flex: 1;
    	background-color: blue;
    }
    #second {
    	flex: 3;
    	background-color: yellow;
    	width: 100%;
    	height: 100%;
      text-align:center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #second img {
    	border: solid black 5px;
      box-sizing: border-box;
      max-height: 100%;
      max-width: 100%;
    }
    #vcenter{
      max-height: 100%;
      max-width: 100%;
      height: fit-content;
    }

<!DOCTYPE html>
    <html>
    <body>
    <div id="outer">
    	<div id="top">
    		<div id="first">First</div>
    		<div id="second">
          <div id="vcenter">
    			<img src="https://via.placeholder.com/1350x200/faa">
          </div>
    		</div>
    		<div id="third">Third</div>		
    	</div>
    	<div id="bottom">
    		Bottom
    	</div>
    </div>
    </body>
    </html>

尝试获取带边框的图像以自动拟合Flexbox div

3 个答案: