Question

我在表格中有一个块，用户的个人资料图片显示。但为了保持设计空间，我将块大小设置为200px宽度和300px高度。现在我在用户的图片上设置了以下CSS样式：

.max{
max-width:200px;
max-height:300px;
}

如果有一张大图片（假设为300x400像素），则重新调整大小为200x300像素（做得好）。但我的问题是，如果有一个小图片（假设100x150px），那么它也将它重新调整为200x300px。但我想设置最大宽度和高度。所以在我的情况下，我想显示图片的原始尺寸，如果它小于200x300px。但如果它是大图片，那么它将重新调整为200x300px。任何帮助PLZ（我怎么做？）...... - （Internet Explorer 8.0测试）

如果在css中无法做到，那么在JavaScript中有什么选择吗？有没有好的资料来源？

Answer 1

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

指定td宽度为200px，表格为table-layout：fixed。

这应该可以解决你的问题

Answer 2

最大宽度和高度只是..最大值，因此，它不应该影响较小的图像。

我刚制作了一个文本html页面，较小的图像在最大高度和宽度设置下工作正常。

Answer 3

您可以使用：

 .max  {
    max-width: expression(this.width > 200 ? 200: true);
}

Answer 4

对css了解不多，但这应该在jquery

中进行

$('.images_class').each(function(){
  height = $(this).height();
  width = $(this).width();
  if( height > 200 || width > 300)
    $(this).css('height','200px').css('width','300px');
});

Answer 5

...你可能不得不求助于javascript，如果我正确地理解了你的问题，可能会这样：

$(document).ready( function(){

$('img').each( function(){
    if(  ($(this).width() < 200) && ( $(this).height() < 300 ) ){
        $(this).css({'width' : $(this).width() +'px', 'height' : $(this).height() + 'px' )          
    }
})

}）

...这将涉及jQuery，也没有机会测试。

Answer 6

你所说的非常奇怪。

听起来您实际上是在设置width和height而不是max-*。

我建议您创建一个简单的fiddle并查看问题是否仍然存在。如果是，则发布一个URL，我可以查看它。

CSS或HTML有助于设置图像的最大宽度和高度

6 个答案: