比率アスペクト比維持保持 “.image-trim { position: relative; overflow: hidden; padding-top: 60%; /* 比率 */ } .image-trim img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; }”

Cherenkov のブックマーク 2021/10/08 18:19

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/4674961322789765730/comment/Cherenkov" data-user-id="Cherenkov" data-entry-url="https://b.hatena.ne.jp/entry/s/qiita.com/becolomochi/items/265a7f940a1c809f5ba7" data-original-href="https://qiita.com/becolomochi/items/265a7f940a1c809f5ba7" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fbecolomochi%2Fitems%2F265a7f940a1c809f5ba7" data-user-icon="/users/Cherenkov/profile.png">サイズがバラバラな画像をレスポンシブで縦横比を揃えて表示させる - Qiita</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/css">css</a>]</li></ul><br><p style="clear: left">比率 アスペクト比 維持 保持 “.image-trim { position: relative; overflow: hidden; padding-top: 60%; /* 比率 */ } .image-trim img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; }”</p><a class="datetime" href="https://b.hatena.ne.jp/Cherenkov/20211008#bookmark-4674961322789765730"><span class="datetime-body">2021/10/08 18:19</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！