image - 親の幅/高さCSS HTMLに応じてimgの幅/高さを自動調整

Question

ウィンドウを画像で埋めようとしています。私はCSSを使用してこれを機能させようとしていますが、すべての空白が埋められるまで画像の幅/高さを最大化する方法があるかどうか疑問に思っていましたが、品質を損なうことはありません.

<div class='rel-img-cont'>
    <img src='src.jpg' />
</div>

.rel-img-cont
{
    width: 100px; height: 100px; overflow: hidden;
}
.rel-img-cont img
{
    height: 100px; margin:0 0 0 0;
}

サイズの1つがオーバーフローしなければならない場合でも、空白を埋めるにはどうすればよいですか?それは100pxまでしかありません.

元の画像が100px x 100pxまたは150px x 200pxであっても、これを行う方法はありますか.

ありがとう

Answer 1

background-sizecssプロパティがおもしろいと思うかもしれません。このプロパティは、ここでアプローチしようとしているのと同じことを行うためです。しかし、これはで機能しbackground-imageます。

background-size: 100% 100%;

Answer 2

この場合、pxの代わりに％を使用することをお勧めします

<div id="Maindiv" style="width:100px;height:100px">
<img id="Img" src="http://blog.flattr.net/wp-content/uploads/2011/09/stackoverflow.png" alt="Image"  />
</div>

CSS

#Maindiv img
{
width:100%;
height:100%;
}

Answer 3

私のマシンでテストされているこのコードを使用してください

 <style>
 .rel-img-cont
{
    width: 10%; height: 10%; overflow: hidden;
    border:3px solid orange;
}
.rel-img-cont img
{
    height: 100%; margin:0 0 0 0;
    width:100%;
}
 </style>