Css 加载时，固定大小的图片在chrome中折叠

我必须解决一个问题，固定大小的图片向左浮动，但当图像尚未加载时，它“折叠”（这意味着它不占用假定的宽度）

我为此制作了一个JSFIDLE，但在FIDLE上，一切都运行得很好，令人惊讶。（图像加载速度可能很快，但我怀疑它在我的系统上是否很明显。）

我的布局：

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

在JSFIDLE上：

真实页面（问题实际可见的页面）：

如果您使用chrome并检查“真实页面”，您可以看到尚未加载的图像无法保持其位置，如此图像上的第二个块：

只需按几下f5-s

为什么会这样？如何使图像在加载期间占据其位置

我不是设计师，但我必须解决这个问题。我还没有找到问题的根源

---

如果我明确给出width=“110”，其他浏览器（FF、IE、Opera）也可以正常工作到图像标签。

您可以尝试将浮动、宽度和高度分配给图像的容器，在本例中为

。如果情况并非如此，您可能必须将容器的显示属性更改为

块

。

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

---

这样，即使在加载过程中，chrome也会尊重图片的大小。

如果我显示：block，则文本会在图片下方呈现。您必须浮动图像的容器和

。bd

您可以修改我的JSFIDLE吗？当它们显示为block时，我仍然无法将它们相邻浮动。

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