[英]responsive web design fluid image
我正在使用MVC剃刀代碼生成網站徽標,並在調整網站大小時難以進行圖像縮放。 我嘗試使用image = max-width:100%
and 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 */
}
在這里檢查小提琴,它應該可以幫助您解決問題: 響應式圖像 此處解釋了 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%;
}
}
編輯:使用實際圖像而不是背景圖像樣式。 最初,您的圖片必須具有尺寸,因為它應以100%的寬度和100%的高度顯示。
<div class="float-left">
<a href='@Url.Action("Home", "Home")'><img src="ImageSource" class="responsive_logo" /></a>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.