Question

我希望在不拉伸图像的情况下使图像响应与容器配合。有没有办法实现呢？

＆＃13;

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

＆＃13;

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

＆＃13;

它与jumbotron和使用图片标签非常相似，因为从后端获取网址，我已经尝试使用max-width：100％和max-height：100％也是height：auto但不起作用。我想要的是使图像适合容器的宽度和高度，没有任何拉伸或至少最小化图像上的拉伸

谢谢：）

codepen

Answer 1

从img类

img-wrapper

将overflow: hidden添加到img-wrapper
将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 2

如果您不需要使用图片标记，可以将图形作为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

Answer 3

支持IE

为你的img标签：

.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%);
}

试试这个：

＆＃13;

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

＆＃13;

<ul><li id="1" data-sub="Mathematics">Trigonometry</li>
    <li id="2" data-sub="Literature">The Tempest</li></ul>

＆＃13;

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

3 个答案: