相关疑难解决方法(0)

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

我正在使用图像,我遇到了纵横比问题.

<img src="big_image.jpg" width="900" height="600" alt="" />

正如你所看到的,height并width已经指定.我为图片添加了CSS规则:

img {
  max-width:500px;
}

但是big_image.jpg,我收到width=500和height=600.我如何设置图像以重新调整大小,同时保持其纵横比.

是否可以设置与宽度相同的高度(比例1:1)？

例

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

我找到了这个主题 - 如何在保持图像宽高比的同时拉伸图像以填充<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.任何的想法？也许它比我预期的要容易得多？