css kullanarak elemanın duyarlı arka plan görüntüsünü nasıl belirleyebilirim?

Question

<a> için background-image ayarlamayı her zaman, her zaman stil sayfası dosyasında genişlik ve yükseklik belirtmeniz gerekir. hangi urlimage duyarlı değil yapmak ve ben çözümler denediğimde böyle background-size: cover; background-color: transparent;

veya sınıf satır kullanarak ve belirtmek col veya max-height ve görüntü kaybolur max-width kullanılması gibi başka sorular burada buldum.

<div class="container-fluid" style="position:absolute; bottom:50px;"> 
    <a class="urlImg" href="~/Home/Wall"></a> 
</div> 

ve .css dosyası

.urlImg { 
background-repeat:no-repeat; 
height:243px; 
width:1022px; 
display:block; 
background-image:url(../img/2.2.png); 

} 

.urlImg:hover { 
    background-image:url(../img/2.1.png); 

} 

.urlImg:active { 
    background-image:url(../img/2.3.png); 

} 

.urlImg:visited { 
    background-image:url(../img/2.2.png); 

} 

için

nasıl bu duyarlı urlimages yapmak:

Burada hiç duyarlı değil benim şimdiki kodudur?

Answer 1

I

.container-fluid{ 
    height:50%; 
    width:50%; 
} 

https://fiddle.jshell.net/ywzwk1z0/

da background-size:contain; eklendi, daha açık bir hale getirmek için bir derecede rol yapılan