使图像响应父容器的特定高度

Question

我想让图像响应与容器匹配而不拉伸图像。有什么办法可以做到吗？

.img-wrapper { 
 
    height: 50vh; 
 
    img { 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
}

<h1>Image Responsiveness</h1> 
 

 
<div class="img-wrapper"> 
 
    <img src=https://levels.io/wp-content/uploads/2017/02/coworking-space.jpg> 
 
</div>

它与超大屏幕，并使用图像标记非常相似，因为取出由后台网址，我已经尝试使用最大宽度：100％，最大高度：100％还高：自动但不起作用。我要的是让图像适合容器的宽度和高度之内，没有任何拉伸或者至少减少对图像拉伸

谢谢:)

codepen

Answer 1

支持IE太

您img标签：

width: 100%; 
    height: auto; 
    position: relative; 
    top: 50%; 
    -ms-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 

试试这个：

.img-wrapper { 
 
    height: 50vh; 
 
    overflow: hidden; 
 
} 
 
.img-wrapper > img { 
 
    width: 100%; 
 
    height: auto; 
 
    position: relative; 
 
    top: 50%; 
 
    -ms-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    } 
 

 
@media screen and (max-width:800px) { 
 
    .img-wrapper > img { 
 
     min-width:650px; 
 
     top: 0; 
 
     left: 50%; 
 
     transform: translatex(-50%); 
 
}

<h1>Image Responsiveness</h1> 
 

 
<div class="img-wrapper"> 
 
    <img src=https://levels.io/wp-content/uploads/2017/02/coworking-space.jpg> 
 
</div>

Answer 2

1. 采取img属性附加伤害了
img-wrapper类
2. 添加overflow: hidden到img-wrapper
3. 变化height到auto

.img-wrapper{ 
 
height:50vh; 
 
overflow: hidden; 
 
} 
 
img{ 
 
    width:100%; 
 
    height:auto; 
 
}

<h1>Image Responsiveness</h1> 
 

 
<div class="img-wrapper"> 
 
<img src=https://levels.io/wp-content/uploads/2017/02/coworking-space.jpg> 
 
</div>

Answer 3

如果不需要使用图像标签，你可以把图形作为DIV的背景，并使用CSS

div { 
    background: url(img_flwr.gif); 
    background-size: contain; 
    background-repeat: no-repeat; 
} 

而不是“遏制“你也可以玩其他选项。

background-size: 100% auto; 
background-size: auto 100%; 
background-size: cover; 

Codepen： https://codepen.io/Mchaov/pen/NjzpWy

进一步阅读W3Schools的：通常你想要的效果可以用类似的组合来实现 https://www.w3schools.com/cssref/css3_pr_background-size.asp