序章(27) imgの上に文字

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2025/04/30 07:35

序章(27) imgの上に文字

さっきのと同じような挙動をするものをimgで作る

imgに対して基本的にheight系のものはかけない

縦横比が変わるから

画像は横幅だけ指定すれば縦横比を守ってくれる

高さを指定すると縦横比が変わる

1125/520＝　2.16

2000/925＝2.16

min-width: 925px;/*画像の幅の最小値を設定*/

さっきhero_titleを中心にもってきた

箱の中心を取り

箱（親要素）にrelativeをつけて

子供にabsolute

　top: 50%;

　transform: translateY(-50%);

それと同じ。どれに対して何をそろえればいいのか？

画像の親はhero_img

その子供がimg

この2つの中心があえばいい

img_position.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="ja">
<title></title>
<link rel="stylesheet" href="test2.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>imgの上に文字を配置</h1>
<div class="hero">
   <div class="hero_img">
    <img src="hero.jpg" alt="サラダの画像ですよ">
   </div>
   <div class="hero_title">
    <h2>毎日の食事！<br>後略</h2>
    <p>日々の食事が中略あなたへ</p>
   </div>
</div>

<script src="test2.js"></script>
</body>
</html>

test2.css

@charset="UTF-8";
body{
background: #Fcc;
}
img{
max-width:100%;/*自分以上には大きくならない、and 親要素に対して横幅100％*/
}
.hero{
color: #fff;
position: relative;/*親要素にrelativeをかける。親要素を基準に子を動かしたい*/

}
.hero .hero_img{
height: 520px;
overflow: hidden;/*高さ520よりはみ出した部分を隠せ*/
position: relative;/*画像の親にりらてぃぶ*/
}
.hero .hero_img img{
min-width: 925px;/*画像の幅の最小値を設定*/
/*画像を中心ぞろえにするための操作*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);/*xもyも*/
}
.hero .hero_title{
position: absolute;
left: 4rem;
top: 50%;
transform: translateY(-50%);

}

スタティック

何もpositionをかけてない状態らしい

親がこれだと子要素にabsoleteとかかけると変なことになるらしい