css - Making responsive images with different aspect ratios the same height -
I am trying to remove a responsive line of images to make the same height, regardless of aspect ratio Without the width of each image or container the actual image is the same height of the files, but there is a difference in the width. The problem is that when the container becomes smaller, then spherical errors on certain widths make the images separate in a pixel or height, there is a bela here, changing the size of the result panel, and you will see in some width that the images have the same height Are not there.
I am styling the material from CMS so that there is minimal control over markup, and the mandate to use CSS instead of JS I tried to set the height of the image to 100%, but it only Creates a 100% image of its original size, not 100% of the height of the container. Here's the HTML and CSS from Written by Beal:
& Lt; / Div & gt; & Lt; Div class = "cell" & gt; & Lt; Img src = "http://placehold.it/300x400" /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; .table {display: table; Width: 100%; } .row {display: table-row; } .cell {display: table-cell; } IMG {max-width: 100%; }
You want to keep the image in style that is inside the cell, and Cell size, so that you have to change:
img {max-width: 100%}
to
.el IMG {height: 50%; Width: Auto / * This aspect ranks right * /}
Whatever you still want to do on the table, but it will keep images in a This height
Comments
Post a Comment