以与背景图像相同的方式偏移标签中的可视图像

不幸的是,不可能只有一个 <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 .

如果将图像放在一个分区中,可以使用页边距来移动图像。这个特殊的例子使用sprite图像标志作为主链接,它改变了悬停时的位置。您还可以跳过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
}

希望有帮助!

以前

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

后:

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

阅读W3C上的块格式上下文。

有些图像是纵向的,有些是横向的,但是我需要以统一的大小显示缩略图(并在无法满足所需纵横比的情况下裁剪多余的部分)。

使用 background-size: cover 应该 exactly solve that problem 艾斯与 good browser support !

让你想象一下背景(可能使用 background-image 作为内联样式):

<img style="background-image: url('img/foo.png')"/>