【CSS】画像の位置を調整する
img画像の縦横比を維持したままトリミングする
exampl.html
<div>
<img src="*******" class="img">
</div>
example.module.scss
div {
width: 100px;
height: 100px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0% -10%; //数値は例えです
}
}
exampl.html
<div>
<img src="*******" class="img">
</div>
example.module.scss
div {
width: 100px;
height: 100px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0% -10%; //数値は例えです
}
}
object-fit: cover
object-position: 横の位置 縦の位置 //
この２つを設定することで、画像の縦横比を維持したまま画像をトリミングできます。
こちらの記事が参考になりました。
Author And Source
この問題について(【CSS】画像の位置を調整する), 我々は、より多くの情報をここで見つけました https://qiita.com/yoshiwo/items/2e10b1c757d3cc14140e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .