How does CSS make the picture enlarge but not stretch?
I need to display many pictures on one page. I specify the length and width of each img tag in order to be neat and beautiful, but the ratio of length to width of each picture may be inconsistent, which leads to serious stretching of the image. Can I simply enlarge the picture to the scale I set without stretching after specifying the length and width of the img tag? Because stretching will seriously deform the picture
<div class="content">
{volist name="list" id="vo" key="k"}
<a style="display: inline;" href="__STATIC__/{$activity[$k-1]}/{$vo.md5_name}.{$vo.type}" data-lightbox="example-set" data-title="">
<img style="display: inline; border:2px solid white;" width="240" height="135" src="__STATIC__/{$activity[$k-1]}/{$vo.md5_name}.{$vo.type}" alt=""/></a>
{/volist}
</div>
object-fit: cover
however, the compatibility is slightly worse than background-size , and is not compatible with IE, and Edge.
the core of this problem is that the ratio of length to width of the picture is different from that of the display box.
adjust the display box:
- display in a manner similar to waterfall flow or photo wall, of course, this is something to consider for the product
tune picture:
- two time nodes: upload time and display time.
- there are two ways: the length/width of the picture > the length/width, of the display box is zoomed in length at this time. The problem is that the picture may not fill the display box (1). If you zoom in with width, the picture will be partially cut (2).
to sum up, this is a trade-off, not a technical one. It is easier to solve this problem by asking about your product.
Open up a brain, use method (1) and then use AI technology as an assistant to automatically fill in the insufficient parts.
Happy day.
if you want to fix the length and width, use the CSS attribute background-image as mentioned above, and set background-size and background-position .
you can also just fix the height so that the width is automatically adjusted to keep the ratio.
if you want to use img out of semantic considerations (SEO, etc.), you can add a container on the outside, fix the width and height of the container, then position the img in the center of the container, and then set the container's overflow: hidden , but the width and height of img is not easy to control, you can consider listening for events when loading to set width or height.
use background-image play pictures
use background background, background-size:cover,background-position:center center
