0
私のページのメインセクションのバックラウンドを作成しようとしています。画像のサイズは640 x 480で、1204 x 184のコンテナの背景にしたいと思っています。私はこの質問が以前に尋ねられたことは知っていますが、答えはどれも私のために働いていません。divのサイズをカバーするようにイメージを作成するにはどうすればいいですか？また、イメージ全体を見ることができるように縦横比を維持しますか？
質問：画像全体を見ることができるように、アスペクト比を維持しながら、divのサイズをカバーするにはどうすればよいですか。
p.s私のコードを追加しましたが、投稿に写真を追加するにはまだポイントがありません。代わりに使用background-size: 100%の
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main-container{
width: 98%;
margin: auto;
background: lightgray;
}
header{
width:80%;
height: 10%;
background: grey;
margin: auto
}
main{
margin-top: 0px;
width: 80%;
height:600px;
margin: auto;
margin-top: 10px;
background: url(https://placeimg.com/640/480/tech);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Layout practice</title>
</head>
<body>
<div class="main-container">
<header>
<div class="main-header">
<h1>Header</h1>
</div>
</header>
<main>
<!-- <div class="main-content">
-->
</main>
<section class="lower-sec">
<div class="left-box">
</div>
<div class="right-box">
</div>
</section>
</div>
</body>
</html>
？なぜ他のソリューションはあなたのユースケースに合っていませんでしたか？ – UncaughtTypeError
@ UncaughtTypeError私はさまざまな構成を試してみました。私は divの側で画像タグを使用しようとしましたが、私はまた、コンテナの両側に白いスペースを残して背景のサイズを設定しようとしましたが、サイズと画像の幅と高さを設定しようとしました私のコンテナのどちらの方法でも、背景全体をカバーするイメージが得られましたが、イメージの一部はまだ切り取られています。 – Chasencode