查看不调整大小的全宽

Question

您好我想创建一个类似于bootstrap 2.3.2主页上的效果 - http://getbootstrap.com/2.3.2/

效果是'查看全宽，自动切入

我设法得到一个完整的图片宽度

.cut {
     max-width: 450px;
     overflow: hidden;
}

.cut img {
    height: 100%;
}

不幸的是，'图像在移动设备中调整了大小，而我希望你剪切

提前致谢

Answer 1

你想要这个反应灵敏的东西吗？ （尝试调整窗口大小）

http://jsfiddle.net/q78DA/1/

<强> CSS ：

.cut img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

<强> HTML ：

<div class="cut">
    <img src="http://www.lorempixel.com/600/400">
</div>

这称为响应式设计。

Would you like to know more? http://www.geekation.com/wp-content/uploads/2012/07/Geekation_WouldYouLikeToKnowMore.jpg

尝试深入挖掘：http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/