84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
次のようなキャプションが付いた画像があります:
タイトル
CSS には img{max-width:100%} もあります。
img{max-width:100%}
画像の幅と高さの両方を設定し、幅が設定値を下回った場合でも縦横比を維持したいと考えています。そこで、次のようなコードを試してみました。
これはおおよその希望通りですが、画像が「レターボックス化」されている場合、タイトルは画像の下部からかなり離れています。
タイトルを画像の下部にぴったりと合わせたまま、希望の結果を得る方法はありますか?
object-fit: containを使用している場合は、画像全体が親要素に収まる必要があるため、画像の元のアスペクト比がすでに保持されています。したがって、画像の元の幅が 100px、高さが 150px で、画像をwidth: 100pxおよびheight: 200pxに設定した場合、画像の高さはそのままになります。 150 ピクセル、ただし ## 内 #figure要素の上部と下部にさらに 25 ピクセルのスペースが追加されます。
object-fit: contain
width: 100px
height: 200px
要素の上部と下部にさらに 25 ピクセルのスペースが追加されます。
リーリー
object-fit: contains以外のものを使用する必要があります。他のオプションについてはこちらをご覧ください。ただし、figure要素の幅/高さを設定し、そのスペースを画像で埋めたい場合もあります。この場合、次のようにすることができます:リーリー
以外のものを使用する必要があります。他のオプションについては
要素の幅/高さを設定し、そのスペースを画像で埋めたい場合もあります。この場合、次のようにすることができます:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
この問題を解決するには、高さを「自動」に設定するだけです。object-fit: containを使用している場合は、画像全体が親要素に収まる必要があるため、画像の元のアスペクト比がすでに保持されています。したがって、画像の元の幅が 100px、高さが 150px で、画像をwidth: 100pxおよびheight: 200pxに設定した場合、画像の高さはそのままになります。 150 ピクセル、ただし ## 内 #figure要素の上部と下部にさらに 25 ピクセルのスペースが追加されます。リーリー
ここで、実際に幅と高さを定義し、画像をそれらの寸法に強制的に適合させたい場合は、object-fit: contains
以外のものを使用する必要があります。他のオプションについてはこちらをご覧ください。ただし、figure要素の幅/高さを設定し、そのスペースを画像で埋めたい場合もあります。この場合、次のようにすることができます:リーリー