Question

这是我的HTML代码

<div class="feature-image">
    <a class="featured_image_link" href="#">
        <img src="1.jpg">
    </a>                    
</div>

我的图片1.jpg尺寸为150px x 150px，我在css中提到

.feature-image{
    width:150px;
    height:150px;
    display:block; 
    position:relative;
    overflow:hidden;
}

.feature-image img{
    position:absolute; 
    top:-50; 
    left:0; 
    width:100%;
}

我知道当我提供不同的图像尺寸时（例如：300x200或600x350等），图像将填充150x150内部并且不会延伸。

但实际上它不能正常工作。请帮忙解释此代码中是否有错误？

Answer 1

确定。让我解释一下这项工作如何。

首先要做的事情。你的CSS有一个bug。

top:-50;

这不会做任何事情。它必须是

之类的东西

top:-50px;

但我的问题是为什么你想要负利润？它只会在顶部隐藏50像素的图像。

好的，现在谈到真正的问题。您说您的图片为150X150像素时没有问题。那是因为父<div>是150x150。但是如果您有像300x200这样的不同图像尺寸，则会遇到问题。

这是因为在你的CSS中你只提到了width: 100%的图像。从这里可以看出它的简单数学。

宽度= 300＆amp;身高= 200 由于您已提到width:100%，因此图像会自动调整为新宽度

300(original width)/150(new width)=2

So taking the same factor of 2
200(original height)/2=100(new height)

因此，呈现图片的高度为 100px 。

如果您希望渲染图像具有相同的div高度，只需将此行添加到img CSS

即可

height: 100%;

的 Working fiddle 的

Answer 2

来自您粘贴的代码，它正常工作。您是否能够链接到现场和不工作的网站？缓存问题？

参见jsfiddle：http://jsfiddle.net/FNQZn/

.feature-image {
    width:150px;
    height:150px;
    display:block;
    position:relative;
    overflow:hidden;
}
.feature-image img {
    position:absolute;
    top:-50;
    left:0;
    width:100%;
}

图像填充无法正常工作

2 个答案: