css 加载时固定大小图片在镶边中折叠

rvpgvaaj  于 2022-11-27  发布在  其他
关注(0)|答案(2)|浏览(124)

我必须解决一个问题,一个固定大小的图片是浮动左,但虽然图像还没有加载它的“折叠”(这意味着它不占用它的假定宽度)。
我已经为此做了一个jsfiddle,但在小提琴上一切都工作得很好,令人惊讶。(这是可能的,图像加载这么快,但我怀疑它在我的系统上,这是相当明显的。
我的版面配置:

<div class="wrap">
  <a href="#somewhere">
    <img width="110" height="110" class="img" src="http://placehold.it/110x110" alt="Picture" />
  </a>
  <div class="bd">
    <h3>
      <a href="#somewhere">Lorem Ipsum</a>
    </h3>
    <div class="description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sodales lectus. Suspendisse massa ipsum, tempor eget pharetra ac, gravida eu ipsum. Nam sit amet neque vitae dolor consequat volutpat quis et neque. Vestibulum ut purus in quam tincidunt ultricies. In consectetur eleifend dolor, fringilla dignissim lectus dapibus sit amet. Integer nec velit nisl. Cras quis molestie leo. Cras eget odio vel velit eleifend auctor ut a lacus. Suspendisse auctor tincidunt enim eu posuere. Cras dui magna, laoreet sit amet interdum nec, rutrum sit amet turpis. Donec mattis velit eu lectus condimentum luctus.</p>
    </div>
  </div>
</div>

相关CSS:

.wrap {
    padding: 10px;
    margin: 10px 0px;
    overflow: hidden;
}

.img {
  float: left;
  margin-right: 10px;
}

.bd {
  min-width: 200px;
  overflow: hidden;
  zoom: 1;
}

在jsfiddle上:
http://jsfiddle.net/PT4ST/1/
真实的页面(问题实际可见的页面):
http://a4team.eu/multimedia-c376597?oldal=5
如果使用chrome并检查“真实的page”,您可以看到一个尚未加载的图像没有保持它的位置,就像这个图像上的第二个块:

只要按几下F5键。
为什么会这样?如何使图像在加载过程中占据它的位置?
我不是一个设计师,但我必须解决这个问题。我还没有能够找到问题的根源。
其他浏览器(FF、IE、Opera)如果显式地为图像标记给予width=“110”,则可以正常工作。

ej83mcc0

ej83mcc01#

您可以尝试将浮动、宽度和高度指定给图像的容器,在本例中为<a>。如果尚未指定,您可能需要将容器的显示属性更改为block

lx0bsm1f

lx0bsm1f2#

chrome更新后,以下内容足以解决此问题:

.wrap .img {
    width: 110px;
    height: 110px;
}

这样,即使在加载过程中,图片的大小也会在chrome中得到考虑。

相关问题