html – 如何使用d性框在“列”中放置2行图像

概述我正在使用d性盒子建立一个网站.我有一个内部为2’列’的div,以及第二个’列’内部的2’行’,我必须填充两个图像,问题是图像不适合’行’并超过它宽度. 我需要使用导航器大小拉伸或缩小我的图像,所以我不能使用px来表示它们的大小. 这就是我要的： 这就是我得到的： 这是我的代码： #offices { background: peachpuff; display: flex; 我正在使用d性盒子建立一个网站.我有一个内部为2’列’的div,以及第二个’列’内部的2’行’,我必须填充两个图像,问题是图像不适合’行’并超过它宽度.

我需要使用导航器大小拉伸或缩小我的图像,所以我不能使用px来表示它们的大小.

这就是我要的：

这就是我得到的：

这是我的代码：

#offices {  background: peachpuff;        display: flex;  flex-wrap: wrap;  flex-direction: row;}.col {  background: yellow;  flex: 1;      }.row {  background: red;  line-height: 0;  display: flex;}#officesimg img {  flex: 1;  wIDth: 100%;  height: 100%;}

<div ID="offices">  <div >  </div>  <div  ID="officesimg">    <div >      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_01_zpsewjzabzm.jpg" />      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_02_zpsdz0zixcd.jpg" />    </div>    <div >      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_01_zpsewjzabzm.jpg" />      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_02_zpsdz0zixcd.jpg" />    </div>  </div></div>

这是CODEPEN

PD：请避免浮动解决方案.

解决方法 您可以将#officesimg设置为display：flex.并删除高度：100％来自img导致firefox上的纵横比问题.

#offices {  background: peachpuff;  margin: 1em;  display: flex;}.col {  background: yellow;  margin: 1em;  flex: 1;}#officesimg {  line-height: 0;  display: flex;}#officesimg img {  wIDth: 100%;  height: auto;}

<div ID="offices">  <div >  </div>  <div  ID="officesimg">    <div >      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_01_zpsewjzabzm.jpg" />      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_02_zpsdz0zixcd.jpg" />    </div>    <div >      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_01_zpsewjzabzm.jpg" />      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_02_zpsdz0zixcd.jpg" />    </div>  </div></div>

这是一个与您的线框相匹配的略微抛光的版本.

#offices {  background: peachpuff;  margin: 1em;  display: flex;}.col {  background: yellow;  margin: 1em;  flex: 1;}#officesimg {  line-height: 0;  display: flex;  padding: .5em;}#officesimg img {  wIDth: calc(100% - 1em);  height: auto;  margin: .5em;}

<div ID="offices">  <div >  </div>  <div  ID="officesimg">    <div >      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_01_zpsewjzabzm.jpg" />      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_02_zpsdz0zixcd.jpg" />    </div>    <div >      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_01_zpsewjzabzm.jpg" />      <img src="http://i183.photobucket.com/albums/x312/TIEfnuker/office_02_zpsdz0zixcd.jpg" />    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 如何使用d性框在“列”中放置2行图像全部内容，希望文章能够帮你解决html – 如何使用d性框在“列”中放置2行图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。