
ショコラ
HTML 正方形の中に画像を収めるには?
やり方
divで正方形を作成して object-fit:contain を使う。

もっさん先輩

divで正方形を作成します。
<html>
<body>
<div style="position:relative;width:200px;height:200px;">
<img style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;" src="blacky.jpg" >
</div>
</body>
</html>
技1 横幅の四角の中に納める
<html>
<body>
<div style="position:relative;width:100%;height:0;padding-top:100%;">
<img style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;" src="1.jpg" >
</div>
</body>
</html>
技2 縦幅の四角の中に納める
<html>
<body>
<div style="position:relative;width:0%;height:100%;padding-left:100%;">
<img style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;" src="1.jpg" >
</div>
</body>
</html>
以上