目次
最大幅
CSS の width プロパティと max-width プロパティのテストとして、 1 ～ 2048px の画像を表示するテストを行ってみました。
width プロパティは HTML 要素の幅を指定出来ますが、 max-width プロパティで最大幅が指定されている場合、その幅までしか大きくならないようです。
width プロパティの値と max-width プロパティの値を組み合わて表示のテストを行ってみたいと思います。
今回のテストに使用した「サンプルページ」は以下のリンクよりご覧いただけます。
- CSS の width , max-width プロパティのテストとして 1 ～ 2048px の画像を表示してみるテスト。
- https://pulogu.net/wordpress/wp-content/uploads/2023/10/sample-page-css-width-max-width.html
HTML,CSS ソースコード
サンプルページのソースコードは以下の内容になっています。画像の初期の幅は「width:100%;」を指定しています。 JavaScript で width と max-width の値を変更出来るようにしてみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS の width , max-width プロパティのテストとして 1 ～ 2048px の画像を表示してみるテスト。</title>
<link rel="stylesheet" href="" type="text/css" media="all" />
<script type="text/javascript">
function style_settei(c,d,e){
const a=document.querySelectorAll(c);
for(let b=0;b<a.length;b++){
a[b].style[d]=e;
}
}
</script>
<style type="text/css">
.container{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:24px;
gap:24px;
}
.container div{
background-color:yellow;
}
h2{
display: inline-block;
}
img{
width:100%;
}
button{
font-size:3em;
}
hr{
margin: 24px 0;
}
h3{
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
line-break:anywhere;
}
</style>
</head>
<body>
<h1>CSS の width , max-width プロパティのテストとして 1 ～ 2048px の画像を表示してみるテスト。</h1>
<h2>img タグ width プロパティ</h2>
<button onclick="style_settei('img','width','initial')">initial（初期値）</button>
<button onclick="style_settei('img','width','25%')">25%</button>
<button onclick="style_settei('img','width','50%')">50%</button>
<button onclick="style_settei('img','width','100%')">100%</button>
<h2>img タグ max-width プロパティ</h2>
<button onclick="style_settei('img','maxWidth','initial')">initial（初期値）</button>
<button onclick="style_settei('img','maxWidth','25%')">25%</button>
<button onclick="style_settei('img','maxWidth','50%')">50%</button>
<button onclick="style_settei('img','maxWidth','100%')">100%</button>
<hr />
<div class="container">
<div><h3>1px の画像</h3><img src="psd-1px.png" /></div>
<div><h3>2px の画像</h3><img src="psd-2px.png" /></div>
<div><h3>4px の画像</h3><img src="psd-4px.png" /></div>
<div><h3>8px の画像</h3><img src="psd-8px.png" /></div>
<div><h3>16px の画像</h3><img src="psd-16px.png" /></div>
<div><h3>32px の画像</h3><img src="psd-32px.png" /></div>
<div><h3>64px の画像</h3><img src="psd-64px.png" /></div>
<div><h3>128px の画像</h3><img src="psd-128px.png" /></div>
<div><h3>256px の画像</h3><img src="psd-256px.png" /></div>
<div><h3>512px の画像</h3><img src="psd-512px.png" /></div>
<div><h3>1024px の画像</h3><img src="psd-1024px.png" /></div>
<div><h3>2048px の画像</h3><img src="psd-2048px.png" /></div>
</div>
<hr />
</body>
</html>
表示結果
「width : initial」「max-width : initial」の場合、以下の画像の結果になりました。画像が画面からはみ出しています。 initial を指定すると、初期値で表示されるようです。
「width : initial」「max-width : 100%」の場合、 256px 以下の画像は初期値の幅のまま表示されますが、 512px 以上の画像は、上位要素の <div> タグ（黄色で着色された要素）の幅までしか大きくなっていないようです。
この時の上位要素の <div> タグの幅を調べてみると、 333.75px でした。
「width : 100%」「max-width : 50%」の場合、 max-width の効果で上位要素の 50% の幅までしか大きくならないように調整してくれたようです。
この時の画像の大きさは 166.867px になっていました。上位要素の <div> タグの幅は 333.75px になっていたので 333.75px/2=166.875px でほぼ一致しているようです。
補足
今回のサンプルページで使用した JavaScript は以下のように書き換える事も出来るようです。
ループ処理の部分を for 文から forEach() メソッドに変更した内容になっています。
console.log() で querySelectorAll で取得した配列の情報を出力する記述も追加してみました。
function style_settei_foreach(e,f,g){
const a=document.querySelectorAll(e);
a.forEach((b,c,d)=>{
b.style[f]=g;
console.log(b); //a の配列の中の単体の img タグがオブジェクトとして出力される。
console.log(c); //a の配列のインデックス番号が数字として出力される。
console.table(d); //a 全体がオブジェクトとして出力される。
});
}
style_settei_foreach("img","width","50%");
ウェブブラウザ Firefox の開発ツールの「コンソール」タブで上記の JavaScript を実行してみると、以下の画像のようになりました。
右側のウィンドウに console.log() で出力した内容が表示されています。
console.table() を使用してみましたが、 console.log() との違いがないように見えます。使用方法が違うのかもしれません。
右側のウィンドウのみを切り取ってみました。
テスト環境
- Mozilla Firefox 118.0.2
- Windos10（64 ビット）
以上、閲覧ありがとうございました。
