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 подгоняет изображение к высоте элемента и поддерживает соотношение при изменении размера, вы css height img:

.image img {height: 100%;}

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

Answer 3

Добавьте эту CSS к вашему тегу img:

width: auto;
height: 100%;

И поместите это на свой div.image:

overflow: hidden;

Тогда вы можете поиграть с позиционированием так, чтобы изображение центрировалось, а не выровнялось по левому краю.