1
我在响应网格中显示A4，A5，Quarto等大小产品的图像，并使用最大宽度：70％; （和其他百分比值）能够采取任意大小的图像并以正确的比例显示它们。这在约10的浏览器/ OS连击运作良好 - 除了赢得10/IE11display：table-cell导致图像溢出其父div IE12
良好的显示：
在这里，在网格（<div class="product">），每个单元具有黑色轮廓和包含图像红色包装（<div class='productimage'>）加上其他包装将文本和价格分开。使用jquery solution here我已使所有网格单元高度相同。
在IE11中的图像似乎拒绝扩展并想呈现的，而不是其容器的宽度的百分比全尺寸：
从.productimage类包装图像消除display: table-cell;上给出了这样的IE11：
所以尺寸现在是正确的了，但图像是在DIV的顶部。我试过this和基于position: relative/position: absolute的类似解决方案，但无法实现，因为我认为我的div没有固定的高度，并且/或者高度是由jquery设置的。
Codepen
http://codepen.io/anon/pen/ENNvbZ
function equalize() {
var $maxImgHeight = 0;
var $maxTxtHeight = 0;
$('.productrow .productimage').each(function(i) {
if ($(this).height() > $maxImgHeight) {
$maxImgHeight = $(this).height();
}
});
$(".productrow .productimage").height($maxImgHeight);
$('.productrow .producttitle').each(function(i) {
if ($(this).height() > $maxTxtHeight) {
$maxTxtHeight = $(this).height();
}
});
$(".productrow .producttitle").height($maxTxtHeight);
displayWindowSize();
}
function equalizeOnResize() {
$(".productrow .productimage").height('auto');
$(".productrow .producttitle").height('auto');
equalize();
}
window.onresize = equalizeOnResize;
window.onload = equalize;* {
margin: 0;
padding: 0;
-webkit-padding-start: 0;
}
body {
color: #444444;
font-size: 16px;
font-family: Arial;
margin: 0px;
}
.centered_content {
max-width: 1100px;
margin: auto;
}
/*
scale images to relative paper sizes
*/
.a4_diary_image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.quarto_diary_image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
.pocket_diary_image {
max-width: 40%;
margin-left: auto;
margin-right: auto;
}
/*
responsive grid for product categories - show 1,2,3 or 4 products
per row depending on screen size. first .product is mobile - rest
need to have a clear inserted into start of each new row so boxes line up evenly
*/
.product {
background-color: white;
padding: 10px 20px;
margin: 0px;
float: left;
width: 100%;
outline: 1px dashed black;
margin-bottom: 20px;
}
@media (min-width: 500px) and (max-width: 799px) {
.product {
width: 50%;
}
.product:nth-child(2n+1) {
clear: left;
}
}
@media (min-width: 800px) and (max-width: 999px) {
.product {
width: 33.3%;
}
.product:nth-child(3n+1) {
clear: left;
}
}
@media (min-width: 1000px) {
.product {
width: 25%;
}
.product:nth-child(4n+1) {
clear: left;
}
}
/*
detailied styling of each .product
*/
.producttitle {
padding: 4px;
}
/*
display: table-cell; seems to be causing IE problem, when removed
the image are displayed at the correct size and within the DIVs, but
not aligned to the bottom
*/
.productimage {
display: table-cell;
text-align: center;
vertical-align: bottom;
height: 100%;
outline: 1px dashed red;
}
.product_todetails {
outline: 0px solid black;
display: table;
width: 100%;
padding: 4px;
border-top: 1px dashed #000080;
}
.productprice {
display: table-cell;
font-size: 24px;
vertical-align: middle;
color: #000080;
}
.productmoredetails {
display: table-cell;
text-align: right;
vertical-align: middle;
}
.productmoredetails .btn-primary {
background-color: #444;
border: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<div class="productrow">
<!-- nth-child wrapper -->
<div class="product">
<div class='productimage'>
<a href='a4ultra_detail.php'>
<img class='a4_diary_image' src='http://solomon.ie/so/A4_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='a4ultra_detail.php'>A4 </a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
<a href='#' class="btn btn-sm btn-primary">More info/buy</a>
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a6_diary_image' src='http://solomon.ie/so/A6_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A6 - this can go onto several lines and the other DIVs will line up</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
<a href='#' class="btn btn-sm btn-primary">More info/buy</a>
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a5_diary_image' src='http://solomon.ie/so/A5_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A5</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
<a href='#' class="btn btn-sm btn-primary">More info/buy</a>
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='quarto_diary_image' src='http://solomon.ie/so/Q_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Quarto</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
<a href='#' class="btn btn-sm btn-primary">More info/buy</a>
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='pocket_diary_image' src='http://solomon.ie/so/POCKET_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Pocket</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
<a href='#' class="btn btn-sm btn-primary">More info/buy</a>
</div>
</div>
</div>
</div>
<!--/nth-child wrapper -->
</div>
<!--/panel-body -->
</div>
<!--/panel -->
我怀疑它的高度100％上的.productimage，可能需要添加一个宽度和高度像素 –
嗨，这是一个响应网站，所以设置像素不是一个选项。除非我弄错了，否则图像不应大于其容器格。对于A4来说，它应该是100％高，因此100％宽，但是100％宽是在PC上大约（不包括）1,100个像素的1/4，这应该限制高度。 – KevInSol
我只是试图在代码笔上将我的100％图像设置为70％，没有修复 – KevInSol