缩放图像以适应可用空间,同时防止裁剪
Posted
技术标签:
【中文标题】缩放图像以适应可用空间,同时防止裁剪【英文标题】:Scale image to fit available space, while preventing cropping 【发布时间】:2022-01-19 02:46:34 【问题描述】:我有一个固定高度的容器,里面有两个 div,一个在另一个上面。
顶部 div 包含一个图像。
底部 div 包含可变数量的文本。文本越多,底部 div 越高,顶部 div 越短。
随着顶部 div 的扩大或缩小,我希望图像能够优雅地缩放
它保持其纵横比, 它没有被裁剪 它永远不会超过其固有的高度/宽度关于最佳方法的任何想法?这是我到目前为止的代码。 https://stackblitz.com/edit/web-platform-vz3xhh
【问题讨论】:
【参考方案1】:您可以将max-width:100%;
用于img 属性。而且您这里提到的图像尺寸非常小,因此图像不适合容器,您可以更改并尝试图像。
.container
border: 2px solid red;
height: 402px;
display: flex;
flex-direction: column;
justify-content: flex-end;
.container div
border: 5px dashed green;
.container div:first-child
max-width:100%;
height: 100%;
background-image: url(https://content3.jdmagicbox.com/comp/noida/p7/011pxx11.xx11.170809044019.f8p7/catalogue/sahoo-ji-veg-mart-noida-0gmaal31ny.jpg?clr=4f3917);
background-repeat: no-repeat;
background-position: center;
.container div:last-child
align-self: flex-end;
img.example1
height: 100%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div></div>
<div>
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
burgdoggen shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly. shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
</div>
</div>
</body>
</html>
【讨论】:
感谢 @srinithi R 抽出宝贵时间,但图像仍然在您的解决方案中被裁剪。我希望图像不被裁剪。【参考方案2】:您可以使用background-position: cover;
,它不会裁剪背景图像。我建议使用更大或更高分辨率的图像,因为实际上没有办法在 CSS 中缩放纵横比。尤其是当你的容器有 100% 时;宽度,我会确保图像很大。试试看吧!
.container
border: 2px solid red;
height: 402px;
display: flex;
flex-direction: column;
justify-content: flex-end;
.container div
border: 5px dashed green;
.container div:first-child
max-width:100%;
height: 100%;
background-image: url('https://content3.jdmagicbox.com/comp/noida/p7/011pxx11.xx11.170809044019.f8p7/catalogue/sahoo-ji-veg-mart-noida-0gmaal31ny.jpg?clr=4f3917');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
.container div:last-child
align-self: flex-end;
img.example1
height: 100%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div></div>
<div>
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
burgdoggen shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly. shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
</div>
</div>
</body>
</html>
编辑:高分辨率图像的示例。
.container
border: 2px solid red;
height: 402px;
display: flex;
flex-direction: column;
justify-content: flex-end;
.container div
border: 5px dashed green;
.container div:first-child
max-width:100%;
height: 100%;
background-image: url('https://ag.utah.gov/wp-content/uploads/2021/06/foodhub-e1623956166619.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
.container div:last-child
align-self: flex-end;
img.example1
height: 100%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div></div>
<div>
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
burgdoggen shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly. shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
prosciutto pastrami jerky pancetta chislic drumstick beef andouille
</div>
</div>
</body>
</html>
【讨论】:
以上是关于缩放图像以适应可用空间,同时防止裁剪的主要内容,如果未能解决你的问题,请参考以下文章