3

これは私のhtmlコードです

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

私の画像1.jpgのサイズは150px x 150pxCSSで次のように述べています

.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

Ok。これがどのように機能するかを説明しましょう。

まず最初に。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 に答える