отзывчивый веб-дизайн жидкое изображение

Question

Я использую код бритвы MVC для создания логотипа сайта и борьбы с масштабированием изображений с изменением размера веб-сайта. Я пробовал с image = max-width:100% и height:auto, но он не работает!

Вот мой код:

<div class="float-left"> 
    <p class="site-title">@Html.ActionLink(" ", "Home", "Home", null, new {@class = "crown_logo"})</p> 
</div> 

a.crown_logo { 
display:block; 
width:284px; 
height:87px; 
background-image :url("../GUI/Images/rsz_crown_2.png"); 
text-indent: -9999px; /* hides the link text */ 
} 

Answer 1

Проверьте скрипку здесь это должно помочь вам с вашей проблемой: responsive image Вся концепция объяснила here CSS:

img.responsive_logo 
{ 
    position: absolute; 
    max-width: 80%; 
    top: 10%; 
    left: 10%; 
    border-radius: 3px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.9); 
} 

img.responsive_logo:empty 
{ 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

@media screen and (orientation: portrait) { 
    img.responsive_logo { 
     max-width: 90%; 
    } 
} 

@media screen and (orientation: landscape) { 
    img.responsive_logo { 
     max-height: 90%; 
    } 
} 

EDIT: Используйте фактическое изображение, а не стиль фонового изображения. Первоначально ваше изображение должно иметь размеры, так как оно должно отображаться со скоростью 100% и высотой 100%.

<div class="float-left"> 
    <a href='@Url.Action("Home", "Home")'><img src="ImageSource" class="responsive_logo" /></a> 
</div>