Question

这里发生的限制<img>元素的其他CSS定义是什么？

这是一个例子，我只定义宽度和高度，但你会看到该元素使用整个图像并将其缩放以适合，而<div>元素使用100％的图像围绕宽度和高度进行缩放和剪辑。

如何控制<img>的行为更像<div>？

<img src="http://i.eho.st/pjw35bzm.jpg" width="140" height="140" />

<div id="img"></div>

<style>
#img{
    width: 140px;
    height: 140px;
    background: url(http://i.eho.st/pjw35bzm.jpg);
}
</style>

Answer 1

您可以使用CSS clip裁剪图片，但它仅适用于position:absolute的元素。

<img src="http://i.eho.st/pjw35bzm.jpg" class="two" />

img.two {
    position:absolute;
    clip: rect(0px, 140px, 140px, 0px); 
}

Working Example

Answer 2

仅供记录。如果要创建div并将其背景显示为作为img，则应使用background-size属性。

检查this jsfiddle。

<强> HTML ：

<img id="Img" src="http://goo.gl/OJhO2s" />
<div id="ImgBg"></div>

<强> CSS ：

#Img {
    width: 100px;
    height: 100px;
}

#ImgBg {
    width: 100px;
    height: 100px;
    background: url('http://goo.gl/OJhO2s');
    background-size: 100px 100px;
    background-repeat: no-repeat;
}

background-repeat属性是可选的，仅在您的div恰好大于背景大小的情况下作为后备措施。

在相反的情况下：

img元素可以具有block显示属性，其行为与div s类似。然后，您可以像常规div一样浮动和隐藏它们。它们的显示属性默认设置为inline-block。

但 img元素默认情况下始终会缩放他们设置的图片up to the size，因此没有官方方法让他们剪辑他们的图片内容。您唯一的选择是带有背景图片的div。

<img/>元素与background-image

2 个答案: