设置图像纵横比

.y_gap00{margin:15px000!important;}.nice_title{文本溢出：省略号；空白：nowrap；溢出：隐藏；宽度：100%；显示：内联块；}.image_tag{宽度：100%；}.image{宽度：100%；显示：块；重复：不重复；background-size:cover;}.pointer{cursor:pointer;}如果您正在考虑如何设置与容器宽度成比例的高度，那么这应该对您有所帮助。最近遇到一个响应式设计的需求。页面缩放时，整体结构不变，按照原来的比例缩放，如下图：每行显示4张图片。这个需求看似简单，其实，真的很简单……开始写代码.y_gap00{margin:15px000!important;}.nice_title{文本溢出：省略号；空白：nowrap；溢出：隐藏；宽度：100%；显示：内联块；}.image_tag{宽度：100%；}.image{宽度：100%；显示：块；重复：不重复；background-size:cover;}.pointer{cursor:pointer;}代码看起来天衣无缝（当时理解需求的时候，听说以后可能会增加课程，所以只需要维护cate_list是的，你可以随意添加^_^)理想是丰满的，现实是骨感测试时，我发现上面的代码在浏览器中表现如下！！！为什么不均匀？原因是需求方提供的图片尺寸不一样！！！.那么，如何让它们看起来一样呢？1.给图片设置一个固定的高度（不可行，缩放后会变形）；2.给图片设置一个固定的纵横比（可行，这样缩放后也能保持统一）那么问题来了，原来的宽度不是固定的，怎么按scale设置高度呢？这就是下面提到的纵横比。替换掉img标签.y_gap00{margin:15px000!important;}.nice_title{文本溢出：省略号；空白：nowrap；溢出：隐藏；宽度：100%；显示：内联块；}.image_tag{宽度：100%；}.image{宽度：100%；显示：块；填充顶部：60%；size:cover;}.pointer{cursor:pointer;}