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

chairy11 · 发布于 2014年01月26日 · 最后由 chairy11 回复于 2014年02月10日 · 46030 次阅读
827

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

响应式图片的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楼

共收到 21 条回复
96

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

250

如果图是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;
}

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

827

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

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

827

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

96

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

250

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

5453

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

827

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

827

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

827

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

827

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

5453

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

374

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

2575

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

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

#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%。

5453

@luin 这招真厉害!

449

#15楼 @luin 感谢啊

96

算是奇技淫巧了

9162

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

21楼 已删除
827

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

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