Question

这是一个已知的问题，“在图像加载之前，使用流畅大小的图像，图像容器最初会出现折叠状态。”

我已经修复了横幅图片和产品图片添加div并使用此css hack的问题：

height: 0;
overflow: hidden;
padding-bottom: 66.6%;
position: relative;

但无法理解如何修复奖励图标块。

首先，图像容器最初显示为折叠，而不是加载一个大图标，而不是第二个，而不是调整大小 - 希望它在手前知道正确的尺寸，以便它看起来很平滑。

以下是问题的screen recording

这是奖励图标块的笔＆gt; https://codepen.io/anon/pen/borJXK

HTML

<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
    <div class="awards-memberships">
        <div class="item">
            <img src="http://via.placeholder.com/188x132"/>
        </div>
        <div class="item">
            <img src="http://via.placeholder.com/146x146"/>
        </div>
        <div class="item">
            <img src="http://via.placeholder.com/204x133"/>
        </div>
    </div>
</div>

CSS

img{vertical-align:bottom;}
body section img{max-width:100%;height:auto;}
.awards-memberships-container{background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships{display:flex;padding:5px 15px;}
.awards-memberships .item{padding:0px 10px;}

Answer 1

试试这个并告诉我它是怎么回事。

＆＃13;

body section img {max-width:100%;height:auto;}
.awards-memberships-container {background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships {display:flex;justify-content:center;align-items:center;padding:5px 15px;}
.awards-memberships .item {padding:0px 10px;}
.awards-memberships .item img {display:block;width:auto;height:auto;max-width:100%;}

＆＃13;

<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
  <div class="awards-memberships">
    <div class="item">
      <img src="http://via.placeholder.com/188x132" alt="img1">
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/146x146" alt="img2">
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/204x133" alt="img3">
    </div>
  </div>
</div>

＆＃13;

图像容器最初显示为折叠状态，而图像逐个显示

1 个答案: