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

将此CSS添加到您的img标签：

width: auto;
height: 100%;

并将其放在您的div.image中：

overflow: hidden;

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

Answer 2

  

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

大多数图像无法在容器的上下左右放置，同时在所有屏幕尺寸上都保持宽高比。在较小的屏幕尺寸上，您可以做的一件事是让图像占据屏幕宽度的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 3

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

.image img {height: 100%;}

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