新手问题 [已解决] 图片 CSS:怎样才能 “响应式 + 固定宽高比例”?

chairy11 · 2014年01月26日 · 最后由 b8201032 回复于 2018年10月03日 · 69452 次阅读

问题:怎样才能“响应式 + 固定宽高比例”,多余的自动截掉?

响应式图片的 CSS

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
 }

比如我原图是 500×300, 即原图是宽高比例 5:3。 我想要宽高比例是 5:2,响应式:max-width:100%, 而且多余的 overflow:hidden (即当 div 宽度为 500 的时候,只保留上面那 200 像素,变成 500×200, 剩余的部分隐藏了). 怎么组合呢?

======================================================================

解决方法:见#15 楼

去掉所有 CSS 就可以了 img元素本身就是按图片的比例的

如果图是 5:3 而你要 5:2,图会变形,如果要保持图和比例不变 我能想到的一种办法是这样: 用一个透明的 png/gif w:h 为 5:2 的图片,如

<img src="transparent.gif" class="img-responsive" />

样式代码:

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  background-image: url(your-original-image-path);
  background-size: cover;
}

代码没有测试过哦,慎用!

#2 楼 @miclle 我意思是,要保持的比例不是原图比例,而是目标比例。多余的隐藏了,不变形。

感觉你的方法很复杂,要不我还是在保存原图的时候,就先裁剪成目标比例尺寸了。

#1 楼 @bhuztez 额,我不是这意思……

#4 楼 @chairy11 你返回事先按比例裁好的图不就完了

除了裁图片,没有别的办法了 用 CarrierWave 上传图片时,多弄几个 version 用七牛云,更方便

要是纯 CSS 的话,你可以控制外面的 overflow hidden 就好

#5 楼 @bhuztez 这不懒嘛,不想客户那么麻烦每张图片地去裁剪……看来没法了……

#6 楼 @miclle 我买了又拍云空间,还没用,貌似也有这种裁剪功能,我到时再研究下……

#7 楼 @tyaccp_guojian 哦,对,我试试。我之前怎么没想到呢?

#9 楼 @chairy11 哦,貌似不对吧,因为我图片外面的 article 也是响应式的,如果我不能定高,那我貌似无法设置 figure 的高度,那就没法用 overflow hidden……

我最近也遇到响应式高度的问题,不过因为我的图片都是用 API 处理过的,长宽比是固定的,所以外层的 DIV 我是没有控制的

呃,Js 处理吧,起码比后端处理成本低。 @miclle 的方法是正确的,而且也不是很麻烦呀,就是把原来的图片做成一个透明 img 的背景。

不考虑旧式浏览器的话,纯 css 的方法可以这样做,最大限度的撑大背景图并居中显示。

.img-responsive {
  background-size: cover;
  background-position: 50% 50%;
}

#15 楼 @luin 说的方法是最方便的,如:

HTML:
<p class="image-container">
  <img src="xxx.png">
</p>
CSS:
p.image-container {
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  overflow: hidden;
}

p.image-container img {
  width: 100%;
}

这样做图片保持原比例,但只显示上方 40%。

@luin 这招真厉害!

算是奇技淫巧了

卧槽……原来这么简单……我为了做全屏 img 伸缩写了好一阵子 coffee 呢………最后采用判断窗口长宽比然后选择图片是 width100% 还是 height100%………剩下参数一溜 auto…

21 楼 已删除

#15 楼 @luin 非常酷!受教了!谢谢:)

感謝 #15 楼 、ashchan…原來這樣就可以,太強了

需要 登录 后方可回复, 如果你还没有账号请 注册新账号