ショコラ
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>技１ 横幅の四角の中に納める
<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>技２ 縦幅の四角の中に納める
<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>以上