Question

我们经常发现自己想要这样做：

<section class="product">
    <img src="/images/widget.jpg" width="300" height="200" alt="A Widget" />
    <h2>A Widget</h2>
    <p>Here's the description of a great widget</p>
</section>

从语义上讲，上述内容是错误的，因为我认为图像应该在标题之后，而不是之前。为了解决这个问题，我总是这样做：

<section class="product">
    <h2>A Widget</h2>
    <img src="/images/widget.jpg" width="300" height="200" alt="A Widget" />
    <p>Here's the description of a great widget</p>
</section>

...然后CSS如下：

.product {
    position: relative;
    padding-top: 220px;
}

.product img {
    position: absolute;
    top: 0;
    left: 0;
}

这意味着HTML标记处于更好的顺序，但在视觉上图像显示在标题之前，这就是我想要的。

问题是，现在我正在制作响应式网站，图像宽度（和高度）可以缩放到未知大小。这意味着无法知道应用于容器顶部的填充量以容纳绝对定位的图像。

是否有其他解决方案，除了将图像放在标题之前，感觉脏，脏，脏。

Answer 1

如果您知道图像的比例，则可以尝试使用百分比。

.product {
    position: relative;
    padding-top: 66%; 
    /* The ratio of the image is 3/2 (300x200). 
       When 100% wide it's 66% high. So you can add padding of 66%. */
}

.product img {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: auto;
}

并删除img标签中的width =“”和height =“”。

<section class="product">
  <h2>A Widget</h2>
  <img src="/images/widget.jpg" alt="A Widget" />
  <p>Here's the description of a great widget</p>
</section>

Answer 2

对于这样的情况，我放弃了非常小的语义问题，并以一种需要最少量欺骗的方式对元素进行排序，将它们放在我想要的位置。在您的情况下，我要让img在h1之前，并将其留在那里。

但是，如果您在订购它们时已经死定了＃34;正确＆＃34;，您可以根据所讨论的img的高度，使用jQuery动态更改示例中的padding-top。 / p>

Here's an example on jsFiddle

如何在标题元素之前可视地定位图像

2 个答案: