#img-alfa画像をレスポンシブにするにはどうすればよいですか？私はすでに試したbackground-size:100% auto;と私は削除した場合widthとheightのbackground-image、それは完全に消えます。
.img-responsive {
width: 100%;
vertical-align: middle;
}
#img-alfa {
top: -60px;
left: 68px;
height: 200px;
width: 150px;
position: absolute;
background: url("../img/alfazwartwitsmall2.png") no-repeat;
}
#img-alfa:hover {
top: -60px;
left: 68px;
height: 200px;
width: 150px;
position: absolute;
background: url("../img/alfakleursmall2.png") no-repeat;
}<div class="col-xs-6 col-sm-3 placeholder">
<img class="img-responsive"
src="img/background_white.jpg">
<span class="circle_inner">
<a href="#"><div style="border-radius: 0em;" class="img-responsive" id="img-alfa" ></div></a>
</span>
</div>ありがとう！
background-size: cover;画像の比率を維持するためのトリックを使用して、を使用できます。
.img-responsive {
width: 100%;
vertical-align: middle;
}
#img-alfa {
padding-bottom: 75%; /* See comments under snippet */
background-image: url("https://placekitten.com/g/200/150");
background-size: cover;
}<img class="img-responsive" src="https://placekitten.com/200/150">
<div class="img-responsive" id="img-alfa"></div>秘訣は、にパーセント値を使用することですpadding-bottom。値は、幅の値（= 100％）に基づいて計算されます。75%値を定義する方法は次のとおりです。
パディング-底= 100 *高さ/幅= 100 * 150/250 = 75
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加