使图像最大可用宽度/高度但不丢失纵横比？

Question

如何在不损失纵横比的情况下调整图像大小以使其尽可能大？

这可以通过图片元素实现，但我需要支持IE9。

请注意，在我的示例中，两个图像都小于容器，但实际上有些图像会更大并且必须按比例缩小。

我无法使用背景图片，如果可能的话，我会优先使用javascript。

比容器大的图像可以很容易地按比例缩小：

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

因此有没有办法诱使浏览器认为图像比它大？这类似于使用picture元素可以执行的操作，其中使用sizes属性可以设置图像的预期大小。

http://codepen.io/anon/pen/KdaboK

<div class="one">
<img src="http://www.nwhgeopark.com/wp-content/uploads/landscape.jpg" />
</div>
<div class="one">
<img src="http://ecx.images-amazon.com/images/I/519fW0fHKbL._SY300_.jpg" />
</div>

.one {
  border: 1px solid red;
  float: left;
  margin: 20px;
  height: 500px;
  width: 500px;

}

img {

}

Answer 1

你可以使用这个jquery：

$(document).ready(function() {
  var imgs = $('img');
  imgs.each(function(){
    var img = $(this);
    var width = img.width(); 
    var height = img.height();
    if(width < height){
       img.addClass('portrait');
    }else{
       img.addClass('landscape');
    }
  })
});

这将根据方向为图像添加一个类。然后添加这个css：

.landscape {
    width:100%;
    height:auto;  
}

.portrait {
    height:100%;
    width:auto;
}

它可以像你在寻找的那样：

<强> JSFIDDLE

Answer 2

我认为最简单的方法是将纵向格式图片与横向格式图片分开并应用响应式规则，试试这个，它应该可行

def Outfile_csv(outfile, dict1, length):
outputfile = open((outfile) + '.csv', 'w', newline ='')

output_list = []


outputWriter = csv.writer(outputfile)
outputWriter.writerow(['PDF file', 'Name', 'Synonyms', 'CAS No.', 'H statements',
                       'TWA limits /ppm', 'STEL limits /ppm'])

for r in range (0, length):
    output_list =[]

    for s in range (0,7):
        if s == 0 or s == 3:
            output_list.append(str((dict1[s][r])).encode('utf-8'))
        else:           
            output_list.append(str(dict1[s][r]))

    outputWriter.writerow(output_list)



outputfile.close()

<div class="one">
<img class="landscape" src="http://www.nwhgeopark.com/wp-content/uploads/landscape.jpg" />
</div>
<div class="one">
<img class="portrait" src="http://ecx.images-amazon.com/images/I/519fW0fHKbL._SY300_.jpg" />
</div>

Answer 3

首先使用jQuery动态获取图像的宽度和高度，然后根据容器宽度找到倍增系数来设置它......

<script>
getImageSize($('#image'), function(width, height) {
$('#info').text(width + ',' + height);
var multiplyFactor = ContainerWidth / width;
//Now set the image width and height
$(img).css({'width': width*multiplyFactor +'px', 
'height':height *    multiplyFactor+'px'});
});

 function getImageSize(img, callback) {
var $img = $(img);

var wait = setInterval(function() {
    var w = $img[0].naturalWidth,
        h = $img[0].naturalHeight;
    if (w && h) {
        clearInterval(wait);
        callback.apply(this, [w, h]);
    }
 }, 30);
 }
 </script>