0 
<!DOCTYPE html>
<html>
    <head>
        <style>
            #container {width:1050px; height:106px;background:red;}
            #image {background-image:url('logo.png');height:106px;}
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
        <div id="container">
            <div id="image"></div>
        </div>
    </body>
</html>

質問

私の背景画像 (logo.png)、サイズは 1624*174 です。#container に従って高さを調整したいです。 、その後、写真のサイズは1866 * 200になるので、基本的に私がやりたいことは次のとおりです。

  1. 写真の高さ= #コンテナの高さ
  2. pic の幅と高さの比率を維持します。

では、どうすればいいですか？

4

1 に答える 1

2

background-sizeBG で CSS ルールを使用できますdiv。

background-size: contain;

または、正確なユースケースについては、高度な試行を行うことができます。

background-size: 106px, auto, cover;

106pxが最小の場合、水平方向に伸び、垂直方向にカバーします。

注:これは、新しいブラウザーでのみ機能します。

于 2013-06-06T09:59:23.447 に答える