Force div sizing, чтобы вести себя как img

Моя цель - создать элемент div размер которого соответствует размеру img в любой ситуации.

Я знаю размеры изображения: 300 * 200 пикселей.

Имитируйте масштабирование img, когда ширина img равна 100% : РАБОТАЕТ

img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.image-placeholder {
  display: flex;
  max-width: 100%;
  background: blue;
}

.image-placeholder-inner {
  flex: 1 1 auto;
  position: relative;
}

.image-placeholder-inner img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
<div style="width:200px;" class="simulate-container">

  <div class="image-wrapper">
    <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
  </div>

  <div class="image-placeholder">

    <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
      <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
    </div>
  </div>
</div>

<div style="width:400px;" class="simulate-container">

  <div class="image-wrapper">
    <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
  </div>

  <div class="image-placeholder">

    <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
      <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
    </div>
  </div>
</div>

Имитируйте масштабирование img, когда img width имеет значение auto : FAILS

Сбой: второй синий прямоугольник не должен быть шириной 100%. .image-placeholder должен иметь style="max-width:300px;" чтобы решить это.

img {
  display: block;
  max-width: 100%;
  width: auto;
}

.image-placeholder {
  display: flex;
  max-width: 100%;
  background: blue;
}

.image-placeholder-inner {
  flex: 1 1 auto;
  position: relative;
}

.image-placeholder-inner img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
<div style="width:200px;" class="simulate-container">

  <div class="image-wrapper">
    <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
  </div>

  <div class="image-placeholder">

    <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
      <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
    </div>
  </div>
</div>

<div style="width:400px;" class="simulate-container">

  <div class="image-wrapper">
    <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
  </div>

  <div class="image-placeholder">

    <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
      <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
    </div>
  </div>

  <div class="image-placeholder" style="max-width:300px;">

    <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
      <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
    </div>
  </div>
</div>

Другое решение для поддержки ширины: auto и width: 100% - это flexbox.

.flex {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
  /* width: auto; It does not matter in this example */
}

.image-placeholder {
  display: flex;
  max-width: 100%;
  background: blue;
}

.image-placeholder-inner {
  flex: 1 1 auto;
  position: relative;
}

.image-placeholder-inner img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
<div class="flex simulate-container" style="width:200px;">

  <div class="image-wrapper">
    <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
  </div>

  <div class="image-placeholder">

    <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
      <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
    </div>
  </div>
</div>

<div class="flex simulate-container" style="width:400px; background: yellow;">

  <div class="image-wrapper">
    <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
  </div>

  <div class="image-placeholder">

    <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
      <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
    </div>
  </div>
</div>

Может показаться, что разделение ведет себя как img , но это не так. Если мы поместим этот div в сетку или во флекс, размер будет другим.

С Flexbox : FAILS Fail: первое синее поле не уменьшается.

.flex {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-start;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.image-placeholder {
  display: flex;
  max-width: 100%;
  background: blue;
}

.image-placeholder-inner {
  flex: 1 1 auto;
  position: relative;
}

.image-placeholder-inner img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
<div class="simulate-container" style="width:200px;">
    <div class="flex">
      <div class="flex-item">

        <div class="image-wrapper">
          <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
        </div>
      </div>
      <div class="flex-item">

        <div class="image-placeholder">

          <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
            <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
          </div>
        </div>
      </div>
  </div>
</div>

<div class="simulate-container" style="width:400px; background: yellow;">
    <div class="flex">
      <div class="flex-item">

        <div class="image-wrapper">
          <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
        </div>
      </div>
      <div class="flex-item">

        <div class="image-placeholder">

          <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
            <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
          </div>
        </div>
      </div>
  </div>
</div>

С сеткой : FAILS Fail: синее поле и изображение имеют одинаковый начальный размер. Пока изображение уменьшается, синее поле все еще отображается как заполненное. Они должны иметь одинаковый размер по всем трем тестам.

.grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.image-placeholder {
  display: flex;
  max-width: 100%;
  background: blue;
}

.image-placeholder-inner {
  flex: 1 1 auto;
  position: relative;
}

.image-placeholder-inner img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
<div class="simulate-container" style="width:200px;">
    <div class="grid">
      <div class="grid-item">

        <div class="image-wrapper">
          <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
        </div>
      </div>
      <div class="grid-item">

        <div class="image-placeholder">

          <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
            <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
          </div>
        </div>
      </div>
  </div>
</div>

<div class="simulate-container" style="width:400px; background: yellow;">
    <div class="grid">
      <div class="grid-item">

        <div class="image-wrapper">
          <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
        </div>
      </div>
      <div class="grid-item">

        <div class="image-placeholder">

          <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
            <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
          </div>
        </div>
      </div>
  </div>
</div>

<div class="simulate-container" style="width:800px; background: yellow;">
    <div class="grid">
      <div class="grid-item">

        <div class="image-wrapper">
          <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />
        </div>
      </div>
      <div class="grid-item">

        <div class="image-placeholder">

          <div class="image-placeholder-inner" style="width: 300px; padding-bottom:calc(200 / 300 * 100%);">
            <!--<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/300x200.jpg" />-->
          </div>
        </div>
      </div>
  </div>
</div>

Эта проблема как-то связана с тем, что div width:300px имеет другое значение по сравнению с img width:300px . Я хочу имитировать поведение img , но я застрял, пытаясь. Это невозможно или есть другой способ преодолеть эту ситуацию?

Моя другая идея состояла бы в том, чтобы использовать SVG так, как он ведет себя, как изображение, но было бы лучше решить это с помощью простого div .

Всего 1 ответ


Вы пробовали холст?

Другой вариант - использовать javascript в сочетании с событиями изменения DOM и css width / height «px» свойствами или свойствами смещения (offsetWidth и offsetHeight), чтобы эмулировать его ... но это будет большой заряд, я использую js только для более экстремальных случаев ,


Есть идеи?

10000