CSS使图像适合元素高度并在调整大小时保持比例

Question

我创建了一个元素，左侧是图像，右侧是文本。

在屏幕调整大小时，我想保持图像比例，同时让它在元素中垂直延伸。相反，图像会像这样缩小：

我怎样才能始终保持图像在高度上扩展但保持其纵横比？

我在我的代码中使用 flex

Codepen： https://codepen.io/anon/pen/pYmjMK

.container {
  width: 100%;
  max-width: 860px;
}

.item {
 display: flex;
 background-color: #ddd;
}

.image {
  width: 30%;
  position: relative;
}

.image:before {
  content: "";
  display: block;
  padding-bottom: 65%;
}

img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

.text {
  width: 70%;
  padding: 15px;
}

.image a {
  display: block;
  width: 100%;
}

Answer 1

在屏幕调整大小时，我想保持图像比例，同时让它在元素中垂直延伸。相反，图像会像这样缩小：

在保持所有屏幕尺寸的纵横比的同时，大多数图像无法在上下和左右放置容器。您可以在较小的屏幕尺寸上做的一件事是让图像占据屏幕宽度的 100% 并覆盖文本或将其放置在下方。即使这样，在较小的屏幕尺寸上，图像也不会占用 100% 的高度并保持纵横比。此外，如果你有太多的文字，它会从图像流血。

这是一个覆盖文本的示例。 ：

.container {
  width: 100%;
  max-width: 860px;
}

.item {
   display: flex;
   background-color: #ddd;
}

.image {
  width: 30%;
  position: relative;
}

.image img {
  height: 100%;
}

.image:before {
  content: "";
  display: block;
  padding-bottom: 65%;
}

img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

.text {
  width: 70%;
  padding: 15px;
}

.image a {
  display: block;
  width: 100%;
}

@media (max-width: 1024px) {
  .image {
    width: 100vw;    
  }

  .text {
    position: absolute;
    color: white;
    font-weight: bold;
    background-image: linear-gradient(rgb(192,192,192), rgb(0,0,0)); /*Fallback*/
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6));
  }
}

<div class="container">
      
      <div class="item">
        <div class="image">
          <a href="#">
            <img src="https://images.unsplash.com/photo-1441986380878-c4248f5b8b5b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
          </a>
        </div>
        <div class="text">
          <h3>Lorem Ipsum Dolor</h3>
          Sed hendrerit. Praesent ut ligula non mi varius sagittis. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Integer tincidunt. Nullam vel sem. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus blandit leo ut odio. Sed hendrerit. Praesent ut ligula non mi varius sagittis. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Integer tincidunt. Nullam vel sem. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus blandit leo ut odio.Sed hendrerit. Praesent ut ligula non mi varius sagittis. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Integer tincidunt. Nullam vel sem. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus blandit leo ut odio.Sed hendrerit. Praesent ut ligula non mi varius sagittis. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Integer tincidunt. Nullam vel sem. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus blandit leo ut odio.
        </div>
      </div>
      
    </div>


    

如果您想保持纵横比并基本上放大图像的一部分：

.image img {
  height: 100%
}

.container {
  width: 100%;
  max-width: 860px;
}

.item {
 display: flex;
 background-color: #ddd;
}

.image {
  width: 30%;
  position: relative;
}

.image img {
  height: 100%;
}

.image:before {
  content: "";
  display: block;
  padding-bottom: 65%;
}

img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

.text {
  width: 70%;
  padding: 15px;
}

.image a {
  display: block;
  width: 100%;
}

<div class="container">
  
  <div class="item">
    <div class="image">
      <a href="#">
        <img src="https://images.unsplash.com/photo-1441986380878-c4248f5b8b5b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
      </a>
    </div>
    <div class="text">
      <h3>Lorem Ipsum Dolor</h3>
      Sed hendrerit. Praesent ut ligula non mi varius sagittis. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Integer tincidunt. Nullam vel sem. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus blandit leo ut odio. Sed hendrerit. Praesent ut ligula non mi varius sagittis. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Integer tincidunt. Nullam vel sem. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus blandit leo ut odio.Sed hendrerit. Praesent ut ligula non mi varius sagittis. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Integer tincidunt. Nullam vel sem. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus blandit leo ut odio.Sed hendrerit. Praesent ut ligula non mi varius sagittis. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Integer tincidunt. Nullam vel sem. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus blandit leo ut odio.
    </div>
  </div>
  
</div>

Answer 2

将此css添加到您的img标签中：

width: auto;
height: 100%;

然后把它放在你的 div.image 上：

overflow: hidden;

然后您可能想要调整定位，以使图像居中而不是左/上对齐。

Answer 3

CSS 使图像适合元素高度并在调整大小时保持比例，你的 css 高度 img：

.image img {height: 100%;}

https://codepen.io/anon/pen/xBNPzm