Невозможно правильно масштабировать изображение в контейнере

#css

Вопрос:

У меня возникли проблемы с масштабированием изображения в контейнере. У меня есть два столбца, левый столбец установлен в 280 пикселей, а правый столбец занимает все, что осталось. Изображение попадает в правый столбец — мы не знаем его размер заранее (в примере это 947 пикселей).

Если окно достаточно большое, все в порядке, но когда оно становится меньше, размер изображения вынуждает правый столбец находиться под левым столбцом. Изображение окончательно масштабируется до тела, как только окно становится достаточно маленьким.

 <!DOCTYPE html>
<head>
  <style type='text/css'>
    @media only screen and ( min-width: 641px ) { /* 641 or greater */
      img { max-width: 100%; height: auto; display: block; }
      .leftcol  { width: 280px; float: left; outline: 5px dotted green; } 
      .rightcol {               float: left; outline: 5px dotted red;   }
    }
  </style>
</head>

<body>
  <div class="leftcol">
    Home
  </div>
  <div class="rightcol">
    <img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
  </div>
</body>
</html>

1. Вам также нужно установить width: 100% на img . max-width: 100% относительно собственного размера img . width относится к содержащему элементу. img { width: 100%; max-width: 100%; height: auto; display: block; }

2. Просто используйте display: flex; и flex свойство codepen.io/MrFuze/pen/ExKmxpM

Ответ №1:

Flexbox — хорошее решение для того, чего вы пытаетесь достичь. С приведенными ниже изменениями он будет работать так, как задумано.

 <!DOCTYPE html>
<html>
<head>
    <style type='text/css'>
        @media only screen and ( min-width: 641px) {
            body {
                display: flex;
                align-items: flex-start;
            }
            img {
                max-width: 100%;
            }
            .leftcol {
                width: 280px;
                min-width: 280px;
                outline: 5px dotted green;
            }
            .rightcol {
                outline: 5px dotted red;
            }
        }
    </style>
</head>

<body>
    <div class="leftcol">
        Home
    </div>
    <div class="rightcol">
        <img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
    </div>
</body>
</html>

Больше нет float s, min-width установленных для .leftcol и только max-width для изображения.

Ответ №2:

Происходит пара вещей:

Float не очень хорошо вычисляет оставшееся пространство, поэтому вы можете использовать calc(100% - 280px) в правом столбце. Это гарантирует, что оно всегда будет на 100% МЕНЬШЕ ширины другого столбца:
Ваше изображение все еще нуждается в width: 100% настройке, поскольку max-width оно соответствует фактическому размеру изображения:

 @media only screen and ( min-width: 400px) {
  /* 641 or greater */
  img {
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%;
  }
  .leftcol {
    width: 280px;
    float: left;
    outline: 5px dotted green;
  }
  .rightcol {
    float: left;
    outline: 5px dotted red;
    width: calc(100% - 280px)
  }
}

 <div class="leftcol">
  Home
</div>
<div class="rightcol">
  <img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
</div>

Использование flex — лучшее решение для вас.

 @media only screen and ( min-width: 400px) {
  /* 641 or greater */
  .flex {
    display: flex;
    align-items: flex-start;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%;
  }
  .leftcol {
    width: 280px;
    outline: 5px dotted green;
  }
  .rightcol {
    outline: 5px dotted red;
    flex: 1 1 100%;
  }
}

 <div class="flex">
  <div class="leftcol">
    Home
  </div>
  <div class="rightcol">
    <img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
  </div>
</div>