相关疑难解决方法(0)

如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽度:高度比？

示例:stackoverflow.com - 当图像插入编辑器面板并且图像太大而无法放入页面时,图像会自动调整大小.

有没有办法使用ONLY CSS按比例调整大小(缩小)图像？

我正在做JavaScript方式,但只是想看看CSS是否可行.

我找到了这个主题 - 如何在保持图像宽高比的同时拉伸图像以填充<div>？ - 这不完全是我想要的东西.

我有一个特定大小的div和里面的图像.无论图像是横向还是纵向,我都希望始终用图像填充div.如果图像被切断(div本身隐藏了溢出)并不重要.

因此,如果图像是肖像我希望它width是100%,height:auto所以它保持成比例.如果图像是风景我想要的height是100%和width to beauto`.听起来很复杂吧？

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

由于我不知道该怎么做,我只是简单地创建了我的意思的快速图像.我甚至无法正确描述它.

所以,我想我不是第一个问这个的人.但是我无法真正找到解决方案.也许有一些新的CSS3方式这样做 - 我想的是flex-box.任何的想法？也许它比我预期的要容易得多？

我有各种尺寸的大图像,需要在两个维度上完全填充240px的300px容器.这是我现在得到的,只适用于一个方面:

http://jsfiddle.net/HsE6H/

HTML

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

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

比例应该保持不变.基本上,应该在宽度上切除宽图像,而在高度上需要切断高图像.因此,只需放大填充容器所需的数量即可.

不知道为什么我不能让它工作,我需要JavaScript吗？

编辑:要清楚.在小提琴上我需要一切红色.进来的图像是动态的,因此我无法使用背景图像.我愿意使用JavaScript.谢谢!:)

我对Bootstrap的网格布局以及其中的列重叠存在问题.我不确定这个问题究竟是什么,任何建议都会非常感谢,谢谢.

<div class="container">    

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>

网格的屏幕截图 - http://i.stack.imgur.com/a3YBr.jpg

http://www.bootply.com/somVIZEXxC#这是我的网站的bootply,基本上我希望cols col-lg-6的高度相同,以便我在其中的图像是均匀的,此刻,一个图像在另一个图像下方延伸.

编辑:当前版本http://www.bootply.com/UIWf6q09h4

使用CSS2和JS模拟即将推出的CSS3对象适配属性的最佳方法是什么？我对包含和覆盖方法感兴趣.

编辑:在CSS3中有这里描述的新的对象适应机制:http://dev.opera.com/articles/view/css3-object-fit-object-position/但是在Opera之外还不支持object-fit浏览器.要创建可移植的解决方案,我需要img增大或缩小到其父级的大小,div而不会失去图像的原始宽高比.这可以通过包含整个图像(技术也称为信箱)或通过放大和溢出图像直到最小尺寸与尺寸匹配div(技术也称为覆盖)来实现.有一些jquery imagefit库,因为它们非常多(可能它们仅在特定浏览器的特定情况下工作).

编辑2:那些花时间阅读它的人已经理解了这个问题,已经提出了一个很好的答案,并给出了答案.很难理解关闭它的决定.