equal height and width image css

Solutions on MaxInterview for equal height and width image css by the best coders in the world

Search
showing results for - "equal height and width image css"
Miguel
06 Nov 2016
1.container {
2  position: relative;
3  width: 37%; /* The size you want */
4}
5.container:after {
6  content: "";
7  display: block;
8  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
9}
10
11.container img {
12  position: absolute; /* Take your picture out of the flow */
13  top: 0;
14  bottom: 0;
15  left: 0;
16  right: 0; /* Make the picture taking the size of it's parent */
17  width: 100%; /* This if for the object-fit */
18  height: 100%; /* This if for the object-fit */
19  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
20  object-position: center;
21}
22
23
24
25//Credit for the great answer of "Amaury Hanser", on stackoverflow:
26//https://stackoverflow.com/questions/51447317/image-height-same-as-width
similar questions
css display original image in smalle widthcss change image widthhow do img with samecss change image heighthow to set height equal to dynamic width pure csskeep aspect ratio of image csshtml css how to arrange images of different sizescss resize image to fit div no stretchingmake images same size csshow to set image size without changing aspect ratio in cssmake all images same size csssame height div csscss keep aspect ratio imagecss image fit in div with aspect ratiocss auto heigh divcss image size adjustcss height auto vs 100
queries leading to this page
make image width and height same csshow to make image same height as it is width cssmake width same as height css imgdifferent size of images how to make equal height and widthmake image height same as width csscss image height and width sameimages with equal width and heightcss if image width greater than heightimage width equal to div widthimages of equal size cssimage equal size cssadjust image size to equal widthcss image set width equal to heightequal height and width image csscss image width equal heighthow to make the width of a div equal to an imagehow to set an image to be a same height and widthheight and width of image the sameimage with equal height and widthheight equal to width images cssimage with same height and widthhow to set all the pictures in same width and height in csscss image height is equal to wifthcss image height equal to widthhow to make images have equal length in css no matter their heightimages of equal height cssimg height same as widthcss set image height equal to widthcss image equal heightsize image css width and height samehow to make an image height same as width csscss make image width same as heightmake image height equal to width cssimg src equal height width autohow handling img width and height not equalimage of same width and heighthow to make images equal size in cssmake images equal size csshtml image width equal to heighthow to equal different height and width images in cssimages with equal wifth anf heighthow to make image of different width have same height csshow to make div height equal to img contenthight is equal to image csscss image max width equal div withcss how to give an image a equal height to widthmake all images equal size csshow to make the image equal to the height of the div csscss equal height img elementscss image height same as widthmake equal image size cssis height of image equal to size of imagecss image width same as heighthow to make the image equal to the width of the div csscss image width equal heighttmake img height equal to width cssimage height same as widthequal height and width image css