3

这是我的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而不是拉伸。

但实际上它不能正常工作。请帮忙看看这段代码有没有错误？

4

2 回答 2

2

好的。让我解释一下这是如何工作的。

第一件事。你的 CSS 有一个错误。

top:-50;

这不会做任何事情。它必须是类似的东西

top:-50px;

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

好的，现在进入真正的问题。150X150你说当你的图像是像素时你没有问题。那是因为父母<div>是150x150. 但是如果你有不同的图像尺寸，300x200你就有问题了。

发生这种情况是因为在您的 CSS 中您只提到width: 100%了图像。从这里开始它的简单数学。

width=300 & height =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%;

工作小提琴

于 2013-08-23T07:08:22.890 回答
-1

从您粘贴的代码来看，它工作正常。您是否可以链接到该网站正在运行但无法正常工作？缓存问题？

见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%;
}
于 2013-08-23T06:36:12.510 回答