画像を可変

HTML CSS

ブラウザのウィンドウの大きさによって画像を狭くしたり、広くしたりしてみましょう(。・ω・。)ﾉ
HTMLファイルのほうは、下記の通りに入力します。


<!DOCTYPE html>
<html lang="ja">
<head>
　　　　<meta charset="UTF-8">
　　　　<link rel="stylesheet" type="text/css" href="style.css">
　　　　<title>画像を可変</title>
</head>
<body>
<div id="navbar">
　　　　<div class="photo">
　　　　<img src="photo.jpg" alt="エフェクト" width="500" height="335" />
　　　　</div>
</div>
</body>
</html>
適当に画像を用意し、bodyタグ内に画像を貼り付けます。
CSSファイルのほうは、下記の通りに入力します。

@charset "UTF-8";

#navbar{
　　　　position:absolute;
　　　　width:40%;
　　　　padding:0px;
}
.photo{
　　　　overflow:hidden;
}

これでブラウザのウィンドウの大きさによって画像を狭くしたり、広くしたり出来ます！

overflowプロパティでコンテンツからはみ出た部分をどう処理するか決め、hiddenという値を使って見えないように設定しています。
画像の切り抜き領域は40%と設定しています。