代码之家 › 专栏 › 技术社区 › christian

固定布局表列内的图像IE10最大宽度失败

width internet-explorer image css html

christian · 技术社区 · 10 年前

尝试将图像限制为 max-width 属于 100% 这个 最大宽度 属性在IE10中无法工作 table cell 有一套 width 和a table-layout: fixed .

如何在保持 table-cell 显示属性?

.row {
  max-width: 700px;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}
.photo,
.text {
  display: table-cell;
  vertical-align: middle;
}
.photo {
  width: 25%;
  img {
    max-width: 100%;
    height: auto;
  }
}
.text {
  width: 75%;
}
HTML <div class="row"> <div class="photo"><img src="http://lorempixel.com/1000/600/sports/1/" alt="" /></div> <div class="text"> Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus,
officia,
asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt,
ea ipsa eos quidem. Aperiam iste voluptate expedita illum,
suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates,
ad. Pariatur rem similique,
cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione corrupti quod repellat quo,
vitae veritatis et magnam doloribus mollitia tenetur? </div> </div> .row {
  max-width: 700px;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}
.photo,
.text {
  display: table-cell;
  vertical-align: middle;
}
.photo {
  width: 25%;
  img {
    max-width: 100%;
    height: auto;
  }
}
.text {
  width: 75%;
}

<div class="row">
  <div class="photo">
    <img src="http://lorempixel.com/1000/600/sports/1/" alt="" />
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus, officia, asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt, ea
    ipsa eos quidem. Aperiam iste voluptate expedita illum, suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates, ad. Pariatur rem similique, cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione
    corrupti quod repellat quo, vitae veritatis et magnam doloribus mollitia tenetur?
  </div>
</div>

2 回复 | 直到 10 年前

dippas 10 年前

问题

这是因为你有你的 table max-width 和因为 img 是内联元素。

min/max-width 不会应用于未替换的内联元素。

W3C specs says:

min-width 和 最大宽度

最大宽度

适用于: 除未替换的内联元素外的所有元素,表行和行组

你可以设置它 width:100% 在里面 国际货币集团

或

width:700px 在里面 桌子

.row {
  max-width: 700px;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}
.photo,
.text {
  display: table-cell;
  vertical-align: middle;
}
.photo {
  width: 25%;
}
.photo img {
  width: 100%;
  height: auto;
}
.text {
  width: 75%;
}

<div class="row">
  <div class="photo">
    <img src="http://lorempixel.com/1000/600/sports/1/" alt="" />
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus, officia, asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt, ea
    ipsa eos quidem. Aperiam iste voluptate expedita illum, suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates, ad. Pariatur rem similique, cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione
    corrupti quod repellat quo, vitae veritatis et magnam doloribus mollitia tenetur?
  </div>
</div>

笔记

IE11中也有。

RadarCricket 10 年前

在CSS中,而不是:

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

.photo{
   width: 25%;
}
.photo img{
   max-width:170px; /* Or another size*/
   width:100%;
   height: auto;
}

除了将这两个元素分开之外,上面还写着“100%制作我的图像,除非它大于170px。也在IE中测试过。