显示图像的宽度为100％或与浏览器的宽度一样大

如何显示图像以使其宽度为原始图像宽度或浏览器宽度的100％（以较小者为准）（我想尽可能多地显示图像尽可能没有水平滚动）。显示图像的宽度为100％或与浏览器的宽度一样大

这是可能的CSS，还是我需要玩弄javascript？

2014-10-30 JensB

@emmanuel，因为它使图像总是适合宽度不工作，我从来没有想图像比它的真实分辨率更大。 – JensB 2014-10-30 20:41:55

Javascript。你不能添加条件给CSS选择器。 – Mark 2014-10-30 20:45:00

试试这个：jsFiddle.net Demo

HTML：

<img src="http://gypsypixiepirate.com/wp-content/uploads/2013/03/Rumpus-party.jpg" class="className" />

CSS：

.className { 
    max-width: 100%; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    margin: auto; 
    overflow: auto; 
    position: fixed; 
}

来源

2014-10-30 20:47:12 MrMAG

美丽的解决方案：我调整了你的小提琴，让它有一个较小的图像来演示魔法（不会将图像拉伸超出其原始尺寸）。 - [修改小提琴]（http://jsfiddle.net/jrulle/vkph322e/） – JRulle 2014-10-30 20:50:53

这工作得很好！ – JensB 2014-10-30 20:53:39

此外，这里是一个版本，通过将其定位在相对定位的父容器中来保持图像在文档流中：[jsfiddle]（http://jsfiddle.net/jrulle/vkph322e/1/） – JRulle 2014-10-30 21:01:42

显示图像的宽度为100％或与浏览器的宽度一样大

回答

相关问题