尝试获取带边框的图像以自动调整弹性框 div

场景：

我无法让图像自动调整周围带有边框的弹性框。
图像将动态生成，因此有时宽度或高度可能是较长的一侧。有时图像会比它应该在的盒子里更小或更大，但它应该自动适合盒子的大小并保持其适当的比例。

审理案件：

我想出的最好的方法是将图像的宽度和高度都设置为 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已经走了多远，我实际上感到非常惊讶，似乎没有简单的解决方案。

你只想要身高 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: 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>

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 容器内。
因此，在这种情况下，我们将以下代码放入 conatiner#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>

你的意思是这样的吗？

更改包括：将width: 100%和height: 100%移动到父级，在 IMG 上添加max-height: 100%，在父级上添加text-align: center

更新：-
在 #second 中添加另一个div -
制作 #seconddisplay: 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>

相关内容

最新更新

热门标签：