menu

information css

HOMEcss CSSで画像をトリミング

2021年01月29日

CSSで画像をトリミング

正方形にトリミングして縦横比を維持したまま可変してくれる方法
ul{
  display: flex;
  flex-wrap: wrap;
}
li{
  position: relative;
  width: 25%;
}
li:before{
  content: "";
  display: block;
  padding-top: 100%;
}
img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}

https://recooord.org/css-images-trimming/

会社案内はこちら

〒410-0822
静岡県沼津市下香貫宮脇200-3

055-935-1339

営業時間 9:00~18:00

お問い合わせ