如何调整图像大小以适应浏览器窗口？

这看起来微不足道，但经过所有的研究和编码，我不能让它工作。条件是:

  1. 浏览器窗口大小未知。所以请不要提出涉及绝对像素大小的解决方案。
  2. 图像的原始尺寸是未知的，可能已经适合也可能不适合浏览器窗口。
  3. 图像垂直和水平居中。
  4. 图像比例必须保守。
  5. 图像必须完整地显示在窗口中(不能裁剪)
  6. 我不希望滚动条出现(如果图像合适，就不应该出现)
  7. 当窗口尺寸改变时，图像会自动调整大小，以占据所有可用空间，而不会超过原始大小。

基本上我想要的是:

.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">

上面代码的问题在于它不能工作: 图片通过添加一个垂直滚动条来获取所有需要的垂直空间。

我可以使用 PHP、 Javascript 和 JQuery，但是我非常想要一个纯 CSS 的解决方案。我不在乎它是否在 IE 中不起作用。

580818 次浏览
小开 
width: 100%;
overflow: hidden;

我相信这样应该就行了。

小开 
html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}

或者看看这个: Http://css-tricks.com/how-to-resizeable-background-image/

小开
最佳答案

更新2018-04-11

这里是一个没有 Javascript 的 只有 CSS解决方案。图像将动态居中并调整大小以适应窗口。

<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html>

使用 JQuery 的[其他，旧的]解决方案设置图像容器的高度(下面示例中的 body) ，以便图像上的 max-height属性按预期工作。当客户端窗口调整大小时，图像也会自动调整大小。

<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>


<img class="center fit" src="pic.jpg" >


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>


</body>
</html>

注意: 用户 gutierrezalex 在这个页面上打包了一个非常类似的 JQuery 插件解决方案。

小开

我有一个类似的要求，必须做它基本的 CSS 和 JavaScript。没有可用的 JQuery。

这就是我的工作。

<html>
<head>
<style>
img {
max-width: 95% !important;
max-height: 95% !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</head>
<body onload='FitImagesToScreen()'>
----
</body>
</html>

注意: 我没有使用100% 的图像宽度，因为总是有一点填充要考虑。

小开

如果您愿意在图像周围放置一个容器元素，那么一个纯 CSS 解决方案是很简单的。您看，当父元素垂直扩展以包含其子元素时，99% 的高度没有任何意义。父节点需要有一个固定的高度，比如... 视窗的高度。

超文本标示语言

<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>

CSS

div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}


img.make-it-fit {
max-width: 99%;
max-height: 99%;
}

玩 小提琴。

小开

这里有一个简单的 CSS 解决方案(JSFiddle) ，可以在任何地方使用，包括移动和 IE:

CSS 2.0:

html, body {
height: 100%;
margin: 0;
padding: 0;
}


img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}

HTML:

<body>
<img src="images/your-image.png" />
</body>
小开

CSS3引入了相对于 viewport 测量的新单位，在本例中，viewport 是窗口。它们是 vh和 vw，分别测量视窗高度和宽度。下面是一个简单的 CSS 解决方案:

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

需要注意的是，只有在没有其他元素影响页面高度的情况下，它才能工作。

小开

我一般懒惰的 CSS 规则:

.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}

这可能会放大你的图像，如果它是低分辨率开始(这是你的图像质量和尺寸的尺寸。 要使图像居中，您也可以尝试(在 CSS 中)

display:block;
margin: auto 0;

让你的形象中心化

在你的 HTML:

<div class="background"></div>
小开

调整图像大小以适应屏幕的最长边保持其纵横比

img[src$="#fit"] {
width: 100vw;
height: auto;
max-width: none;
max-height: 100vh;
object-fit: contain;
}

  • 图像宽度将是100% 的视图端口

  • 图像高度将按比例缩放

  • max-height: 100vw-如果图像高度将成为比查看端口将减少，以适应屏幕，因此图像宽度将减少，因为以下属性

  • object-fit: contain-被替换的内容按比例缩放以保持其高宽比，同时适合元素的内容框

    注意: 只有 IE 16.0以后才完全支持 object-fit

小开

在@Rohit 的回答基础上，它修复了 Chrome 标记的问题，可靠地调整了图像的大小，并且适用于垂直堆叠的多个图像，例如 <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg">。

<style>
img {
max-width: 99vw !important;
max-height: 99vh !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>

小开

简单点，谢谢

.bg {
background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="bg"></div>

小开

我知道这里已经有了一些答案，但是这里是我使用的:

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
小开

在样式标记中使用此代码

<style>
html {
background: url(imagename) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
</style>
小开

对于后代，如果你想要一个解决方案，回答1-6和7的方式，允许调整大小超过原来的大小，我已经开发了一个完整的解决方案，这个问题:

<!DOCTYPE html>
<html>
<body style="overflow:hidden; margin:0; text-align:center;">
<img src="https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_2500kB.jpg" style="height:100vh; max-width:100%; object-fit: contain;">
</body>
</html>

小开

我在 w3上找到了这个纯 CSS 解决方案，并测试了它的工作原理。

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}


.bg {
/* The image used */
background-image: url("../yourimage.jpg");


/* Full height */
height: 100%;


/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>

提交答案