2

私がやりたいのは、画像を親要素に塗りつぶすことです。

<div class="parent">
    <img src="image.jpg">
</div>

私のCSSで私が使用する場合：

img{
   width: 100%;
}

画像が親を塗りつぶしますが、水平方向だけですが、画像が垂直方向に小さい場合は空のスペースが残ります。このような：

ここに画像の説明を入力

私が本当にやりたいのは、全体をカバーするイメージを作成することです。また、overflow: hidden を使用したくありません。画像が親よりもはるかに大きい場合、画像が切り取られるためです。background-size: cover を使用するように、画像のサイズを変更して親をカバーするようにしたいのですが、これは CSS の背景ではなく内部要素であるという違いがあります。

誰か助けてくれませんか？

ありがとうございました。

4

2 に答える 2

2

これを行うには、いくつかの css とラッパー要素を使用できます。親に適用されるサイズは単なる例であり、そこにある必要はありません。ただし必要になりoverflow:hiddenます。

HTML

<div class="parent">
    <div class="img-container">
        <img src="http://placehold.it/200x300"/>
    </div>
</div>

CSS

.parent{
    width:200px;
    height:300px;
    overflow:hidden;
}
.img-container{
    position:relative;
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;    
}
.img-container img{    
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;
}

フィドルhttp://jsfiddle.net/dquN6/

http://css-tricks.com/perfect-full-page-background-image/から適応

于 2013-09-18T19:01:04.460 に答える
0

縦横比を維持せずに画像で親を覆いたい場合はheight:100%、画像の css を追加するだけです。このような：

img {
    width:100%;
    height:100%;
}
于 2013-09-18T19:01:40.727 に答える