Question

使用plain＆lt; img＆gt;标签是否可以使用CSS背景图像和背景位置以相同的方式偏移图像？

页面上有主要图像，当两者都被加载时（因此增加带宽），单独的缩略图是没有意义的。有些图像是纵向的，有些是横向的，但我需要以均匀的尺寸显示缩略图（并在不符合所需宽高比的情况下裁掉多余部分）。

虽然可以使用其他标签和background-CSS值来使用plain＆lt; img＆gt;标签会更好。

Answer 1

不幸的是，仅使用<img>标记是不可能的。我可以为您的问题考虑两种解决方案：

CSS背景图片

创建一个<div>，其中图像应用为背景图像属性：

<div class="thumbnail" style="background: url(an-image.jpg) no-repeat 50% 50%"></div>

CSS剪裁

使用clip-path属性仅显示图像的一部分：

<!-- Clip properties are top, right, bottom, left and define a rectangle by its top-left and bottom-right points -->
<div style="clip-path: inset(10px 200px 200px 10px)">
    <img src="an-image.jpg">
</div>

您可以详细了解in this article。

Answer 2

如果将图像放在div中，可以使用边距移动图像。此特定示例使用精灵图像徽标作为主页链接，在悬停时更改位置。您也可以跳过A标签并使用#logo img。

上的margin属性移动图像

HTML：

<div id="logo">
    <a href="#">
        <img src="img/src.jpg" />
    </a>
</div>

CSS：

#logo { 
    display: block; 
    float: left; 
    margin: 15px 0; 
    padding: 0;
    width: 350px; //portion of the image you wish to display
    height: 50px; //portion of the image you wish to display
    overflow: hidden; //hide the rest of the image
}
#logo img {
    width: 350px; 
    height: 100px; // you'll see this is 2x the height of the viewed image
    padding: 0; 
    margin: 0;
}
#logo a { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
}
#logo a:hover { 
    margin-top: -50px;  //move up to show the over portion of the image
}

希望有所帮助！

Answer 3

之前

<img src="img.png"> Text, Links, Etc

后：

<img src="img.png" style="float:left; margin-bottom:-5px"> Text, Links, Etc

了解W3C上的块格式化上下文。

Answer 4

有些图像是纵向的，有些是横向图像，但我需要以均匀的尺寸显示缩略图（并在不符合所需宽高比的情况下裁掉多余部分）。

使用background-size: cover→exactly solve that problem的background-image！

让你对背景进行成像（可能使用<img style="background-image: url('img/foo.png')"/>作为内联样式）：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if tableView == incomeTable {
        let cell = tableView.dequeueReusableCell(withIdentifier: "incomeCell", for: indexPath) as! ViewControllerTableViewCell

        return cell
    } else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "expenseCell", for: indexPath) as! ViewControllerTableViewCell

        return cell
    }
}

Answer 5

这是一个古老的问题，但这是我在搜索该问题时提出的第一个问题，因此我想我想提一提我认为实际上解决了如何模拟{{1}的原始问题的答案。 }属性。我找到的答案是使用CSS属性background-position和object-position。例如这样的

object-fit

这将在第一行中显示第三张缩略图（假设缩略图以32 x 32像素的规则网格排列）。

<img/>标记中的偏移可视图像与背景图像的偏移方式相同

5 个答案: