scss ボックスサイズにあわせて上下左右センターに画像を表示するCSS。画像の比率やサイズに关系なく中央に配置します。

Posted 2021-05-18

.image-wrap {
	display: table-cell;
	width: 200px;
	height: 200px;
	text-align: center;
	vertical-align: middle;
	line-height: 0;
	border: 1px solid #999;
}

.image-wrap img {
	width: auto;
	height: auto;
	max-width: 200px;
	max-height: 200px;
	margin: 0 auto;
	line-height: 1;	
}

@media screen and (max-width: 376px){
	.image-wrap {
		width: 100%;
		height: 25vw; /* ここは適宜… */
	}
	.image-wrap img {
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}
}