current position:Home>Common CSS notes

Common CSS notes

2022-05-15 02:06:08thankseveryday

grid Common attribute usage record

display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-template-rows: 140px 140px;
gap: 10px;
overflow: hidden;
grid-template-areas:
“a b c d e”
“f f g h i”;

picture centering

Method 1

div{
    
    position:relative;
  width: 100px;
    height: 100px;
    overflow:hidden;
}
 div img{
    
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    transform:translate(-50%,-50%);
}

Method 2

div{
    
  width: 100px;
  height: 100px;
 
}
div img{
    
    width: 100%;
    height: 100%;
    object-fit:cover;
}

copyright notice
author[thankseveryday],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120527258674.html

Random recommended