<html>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
<feature></feature>
</body>
</html>
上記の機能では、画像（background-size：cover）を使用して、正確に4：3の比率で塗りつぶし、常に画面の中央に配置します（画面の高さまたは幅を超えないようにします）。 ）。
次のスタイルシートを試しました。
feature {
padding: 40% 50% 40% 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40%;
margin-left: -50%;
background: url('horse1.jpg') no-repeat center;
background-size: cover;
}
これは、画面が非常に広い場合に問題があり、高さが画面の高さを超えます。max-heightそれを制限していないようです。
何かここでの解決策は悪くありませんが、画面の幅が高さよりも大きい場合、画像は上下に空白の20％を残します。
代わりに、これを試すことができます：
width: 100vw;
height: 75vw;
max-height: 100vh;
max-width: 133.33vh;
margin: auto;
position: absolute;
top:0;bottom:0;
left:0;right:0;
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加