<table>
<tr>
<td colspan="3">
<p class="title">元の画像が小さい場合</p>
</td>
</tr>
<tr>
<td>
<p>画像</p>
<img src="https://mik2062.jp/wp-content/uploads/2024/05/Designer-3-5.jpeg">
</td>
<td>
<p>表示サイズ</p>
<div class="size border">
<p></p>
</div>
</td>
<td>
<p>object-fit: fill;</p>
<img class="size fill" src="https://mik2062.jp/wp-content/uploads/2024/05/Designer-3-5.jpeg">
</td>
</tr>
</table>
.contain {
object-fit: fill;
}
.size {
width: 200px;
height: 300px;
}
/* 見た目とレイアウト用 */
* {
box-sizing: border-box;
list-style: none;
}
td {
text-align: center;
margin: 0 auto;
vertical-align: top;
}
table {
border-collapse: separate;
border-spacing: 20px 0;
}
.border {
border: dotted 3px lightblue;
background: lightyellow;
font-size: 32px;
}
.title {
font-weight: bold;
margin: 20px 0 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.