0

MVC かみそりコードを使用して Web サイトのロゴを生成し、Web サイトのサイズ変更による画像のスケーリングに苦労しています。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 */
}
4

1 に答える 1

1

問題の解決に役立つはずのフィドルをここで確認し てください 。

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>
于 2013-10-13T07:00:45.267 に答える