reagierendes flüssiges Bild des Webdesigns - html5, css3, Rasiermesser, reaktionsfähiges Design

Ich benutze MVC-Razor-Code, um ein Website-Logo zu generieren und habe Probleme mit der Bildskalierung bei der Größenänderung von Websites. Ich habe es mit versucht image = max-width:100% und height:auto aber es funktioniert nicht!

Hier ist mein Code:

<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 */
}

Antworten:

Überprüfen Sie die Geige hier, sie sollte Ihnen bei Ihrem Problem helfen: ansprechendes Bild Das ganze Konzept erklärt Hier 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%;
}
}

BEARBEITEN: Verwenden Sie das tatsächliche Bild und keinen Hintergrundbildstil. Ursprünglich muss Ihr Bild so dimensioniert sein, dass es in 100% Breite und 100% Höhe angezeigt wird.

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