やりたいこと
タイトルからだと分かりにくいですが、やりたいことはこうです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
</head>
</head>
<body>
<section class="profile-content">
<header>
<h1>自己紹介</h1>
</header>
<div class="profile-image"></div>
<p>僕はととろ、君はとろろ。<br>
ごめんほんとは僕、らっしーっていうんだ。Railsエンジニアしてます。</p>
</section>
</body>
</html>
こんな HTML で、
css だけで画面を
|小さくしても縦横ぴったし|大きくしても縦横ぴったし|
|---|---|---|
|
|
|
な感じでウィンドウ幅に合わせて縦横ちゃんと合わせて表示したいのです。
background-size: 100% auto; してやればいいじゃん！は 間違い。
一般的にbackground-size: 100% auto;とすれば指定要素の横幅一杯に背景画像がきて（100%）、高さは縦横比をた保ったまま自動で設定されます（auto）。
しかし、この100%やautoは要素に対するものです。
つまり、100%は親要素の横幅一杯にという意味で、autoは要素自身の高さになります。
要素に内容が何もないと要素自身の高さはゼロです。
だから表示されません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
<style type="text/css">
@charset "utf-8";
.profile-image {
background: url("./images/profile-image.jpg") 0 0 no-repeat;
background-size: 100% auto;
}
</style>
</head>
<body>
<section class="profile-content">
<header>
<h1>自己紹介</h1>
</header>
<div class="profile-image"></div>
<p>僕はととろ、君はとろろ。<br>
ごめんほんとは僕、らっしーっていうんだ。Railsエンジニアしてます。</p>
</section>
</body>
</html>
方法
ではどうすれば良いか、
padding-bottomもしくはpadding-topで要素の内側の余白を指定してあげれば良いです。
calcはcss3で導入された%やpxなどを混ぜて計算できるcssファンクションです。
指定する値は
ImageWidth:ImageHeight = 100%:x
x = 100%*ImageHeight/ImageWidth
で求まるのでcalcで計算させます。
css2以前なら自力で計算して指定してやれば良いですね。（100%*1365/2048 = 66.65%）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
<style type="text/css">
@charset "utf-8";
.profile-image {
background: url("./images/profile-image.jpg") 0 0 no-repeat;
padding-bottom: calc(100%*1365/2048);/* calc(100*ImageHeight/ImageWidth)% */
background-size: 100% auto;
}
</style>
</head>
</head>
<body>
<section class="profile-content">
<header>
<h1>自己紹介</h1>
</header>
<div class="profile-image"></div>
<p>僕はととろ、君はとろろ。<br>
ごめんほんとは僕、らっしーっていうんだ。Railsエンジニアしてます。</p>
</section>
</body>
</html>
あとがき
今回の方法はあらかじめ画像の縦横の長さが（比でも良い）わかっていないとできません。
面倒臭いのでこういうのをデフォルトで指定できたりしたら嬉しいですよね。