我正在为电影摄影师制作一个作品集。他们也做很多摄影,并且希望他们的图像缩略图保持比例,以便在缩小时不会失去任何美感。
我正在寻找一种方法,使图像保持其原始比例,但将其缩放并适配到容器div中(具有固定的宽度和高度)。
我已经尝试了基本上所有方法,包括按比例缩放图像的传统方式:
这对于缩放来说非常好用,但仍然会裁剪图像。(这正是我想避免的)
我一直像一个吸毒成瘾的人一样搜索,但找不到任何解决这个问题的方法。可能是因为我正在寻找一些无法按照我想要的方式解决的东西。
总之.. 简而言之:
我希望缩略图保持其原始图像比例,但大小约为原图的三分之一,并适合容器div。(具有固定的宽度和高度)有人有任何关于如何实现这一点的想法吗?
这里是我想要实现的示例。
我正在寻找一种方法,使图像保持其原始比例,但将其缩放并适配到容器div中(具有固定的宽度和高度)。
我已经尝试了基本上所有方法,包括按比例缩放图像的传统方式:
background:url(../images/banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
这对于缩放来说非常好用,但仍然会裁剪图像。(这正是我想避免的)
我一直像一个吸毒成瘾的人一样搜索,但找不到任何解决这个问题的方法。可能是因为我正在寻找一些无法按照我想要的方式解决的东西。
总之.. 简而言之:
我希望缩略图保持其原始图像比例,但大小约为原图的三分之一,并适合容器div。(具有固定的宽度和高度)有人有任何关于如何实现这一点的想法吗?
这里是我想要实现的示例。
img { max-width: 100%; }
- Axel A. García