在<img>中偏移可见图像标签的方式与背景图像相同

使用plain <img>标签有可能以与CSS背景图像和背景位置相同的方式偏移图像吗？在<img>中偏移可见图像标签的方式与背景图像相同

有在页面上主图像和它意义不大有单独的缩略图时都将被加载（从而增加带宽）。一些图像是肖像，有些是风景，但是我需要显示以均匀的大小的缩略图（和剪切掉多余的，其中它不能满足期望的纵横比）。

虽然使用其他标签和背景CSS值可以使用普通<img>标签。

2010-07-27 Metalshark

不幸的是没有，这是不可能的，只有一个<img>标签。有2个解决方案，我能想到的，您的问题：

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

CSS：在图像作为背景图片属性应用于

CSS背景图像

创建<div>剪辑

使用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。

来源

2010-07-28 01:55:44 Pat

CSS夹做的伎俩（甚至图片）谢谢！ – Metalshark 2010-07-28 07:34:46

错误的做法。至少，如果您将您的内容发送到HOTMAIL帐户。 Hotmail只显示图像，而不是图像的div。一个简单的方法是使用本地img属性剪辑：rect（0px，100px，100px，0px）。很简单。只是不要把它放在溢出：隐藏的div。在w3schools上查看房产。 – Otvazhnii 2015-07-06 13:48:08

要小心，支持'clip-path' [很弱]（https://caniuse.com/css-clip-path/embed） – 2017-11-23 13:15:24

如果你把图像在一个div你可以使用利润来移动图像。这个特殊的例子使用一个精灵图片标志作为改变悬停位置的主页链接。您也可以跳过A标签并使用#logo img上的边距属性移动图像。

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

希望帮助！

来源

2013-01-15 22:24:45 quid

之前

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

后：

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

阅读关于W3C块格式化的内容。

来源

2014-08-25 22:41:01 nottinhill

你是对的。 'quid'的答案是矫枉过正。在我的情况下，即使是“float：left”也没有必要。简单的负边界调整就是将元素的查看区域向左或向右滑动所需的全部内容 - 但可能需要与img标记的高度/宽度尺寸结合使用。一个小提琴（或堆栈片段）将是这个答案的好主意。 – gibberish 2016-02-05 01:20:07

某些图像是纵向的，有些是横向的，但是我需要以统一的尺寸显示缩略图（并裁剪多余部分以达到所需的纵横比）。

使用background-size: cover这应该exactly solve that problem→与good browser support！

并让你图片的背景（可能使用background-image作为内嵌样式）：

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

来源

2017-11-23 13:30:36

在<img>中偏移可见图像标签的方式与背景图像相同

回答

相关问题