yby*_*yby 3 html css scaling image
我必须在页面中显示一堆图像.图像大小不同,有些非常宽,有些非常薄.我想将它们全部放在固定宽度和固定高度的容器中.
放置图像的逻辑应如下所示:假设图像小于容器,将其缩放到最大尺寸以保持纵横比,并将其放在容器的中心.如果图像较大,请在保持纵横比的同时缩小图像.
一些例子:假设我们的容器是150x150,我们的图像大小为100x50.在这种情况下,图像应放大到150x75.如果我们的图像大小为100x300,则图像应缩小到50x150.
虽然这可以通过javascript轻松完成,但我想尽可能避免这种情况.我想知道是否有任何方法可以用CSS单独完成这个.我可以使用仅限CSS3的解决方案,甚至可以使用webkit/firefox特定指令,只要它适用于最新版本的Chrome,Firefox和Safari(如果没有选择,我将使用IE的后备).
编辑:我当然知道最大高度和最大宽度.问题是如果我将max-height和max-width都设置为150,那么如果需要,图像将不会放大.
不要使用<img>.相反,使用一种background-image风格:
background: transparent url('path/to/image.png') no-repeat scroll center center;
background-size: contain;
该background-size做的魔力,缩放图像向上或向下,使其紧贴在容器内适合.