HTML / CSS：以％屏幕宽度*显示图像*最大*原始宽度

Question

我想要一个简单的html代码，以100％的浏览器分辨率宽度显示图像，但不要扩展到大于图像的原始分辨率宽度。

例如，我有一张分辨率为800x600的图像。我想在移动网络浏览器上以100％的宽度显示图像，但在计算机浏览器上的宽度为800，分辨率大于800x600。

这可能吗？

谢谢！

Answer 1

您可以非常轻松地使用CSS执行此操作。

img {
  width: 100%;
  max-width: 800px;
}

Answer 2

使用CSS，您可以实现您想要的目标：

＆＃13;

＆＃13;

img {
  max-width: 100%;
}
@media (min-width: 800px) {
  .img {
    max-width: auto;
  }
}

＆＃13;

<img class='img' src='http://images5.fanpop.com/image/photos/25000000/Facing-the-wind-the-amazing-world-of-gumball-25060558-588-339.png' />

＆＃13;

＆＃13;

＆＃13;

Answer 3

我建议你：

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

如果你正在使用bootstrap，你可以将该类传递给选择器。即。

<img class="img-responsive>

将其包装到div中，并将最大宽度添加到800px到该包装器

Answer 4

解决方案＃1

如果您能够在CSS中关联图片，那么您可以使用background-size:contain;属性contain来调整图片较小的大小，但不大它不会高于其原始分辨率。

CSS

div {
    background-image:url("linkhere.com");
    background-size:contain;
}

解决方案＃2 如果你没有像这样使用CSS的奢侈，那么你可以写一些javascript： 拳头确保您的图像设置为100％

img {
    width:100%;
}

然后是剧本

var image = new Image();
image.src = $(this).attr("src");
image.onload = function() {
    $(this).css({'max-width':this.width+'px');
};

解决方案＃3 如果您知道图像的尺寸，可以将其设置为直线样式 - 如果您有大量图像，这可能需要一些时间 拳头确保您的图像设置为100％

img {
    width:100%;
}

然后在html中写下这样的内容。

<img src="imagesource.com" style="max-width:800px"/>

我会在线写这个，因为你可能有许多你必须编目的图像。