强制大小调整为img

问题描述 投票：2回答：1

我的目标是创建一个div元素，该元素的大小在所有情况下都遵循img的大小。

我知道图像的尺寸：300 * 200像素。

当img宽度为100％]时模拟img的缩放比例：作品

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的缩放比例：失败

失败：第二个蓝色矩形的宽度不应为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>

支持width：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>

div的大小似乎与img相同，但事实并非如此。如果我们将此div放入网格或flex中，则大小将有所不同。

使用Flexbox

：失败失败：第一个蓝色框不会按比例缩小。

.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>

使用网格

：失败失败：蓝色框和图像的初始大小相同。图像缩小时，蓝色框仍显示为满。在所有三个测试中，它们的大小应相同。

.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来解决。

我的目标是创建一个div元素，该元素的大小在所有情况下都遵循img的大小。我知道图像的尺寸：300 * 200像素。当img宽度为...时模拟img的缩放比例。]]

您尝试过画布吗？

[其他选项是将javascript与DOM更改事件和CSS宽度/高度“ px”属性或offset属性（offsetWidth和offsetHeight）结合使用，以模拟它……但这将是繁重的选择，我仅使用js进行更多操作极端情况。

html css flexbox css-grid
1个回答
0
投票

您尝试过画布吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.