 |
親要素内に余白を残さずに画像を表示
【HTML】
<div class=”container3″>
<div class=”pic1″>
<img src=”<?php echo get_template_directory_uri(); ?>/images/sunset1.png” alt=”sunset”>
</div>
<div class=”pic2″>
<video src=”<?php echo get_template_directory_uri(); ?>/images/nagoyaeki1.mp4″ video autoplay muted alt=”nagoyaeki”>
</video>
</div>
</div>
|
【CSS】
.pic1 {
/*object-fit: cover;*/
height: 375px; /* ① */
overflow: hidden; /*拡大時にdiv範囲よりはみ出た部分を隠す*/
/*width: 50%; /*画像の幅*/
/*height: 50%; /*画像の高さ*/
}
.pic1 img{
height: 375px; /* ② */
object-fit: cover /* ③ */
}
①親要素の高さを指定（親要素の大きさを指定しないとオンマウス画像拡大の際に画像がはみ出てしまう。）
②画像の高さを指定 ここまでのみでは、画像が縦に引き伸ばされてしまう。
③縦横比を変えずに高さを合わせる。
