这似乎微不足道,但毕竟研究和编码我无法让它工作.条件是:
基本上我想要的是这个:
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
上面代码的问题在于它不起作用:pic通过添加垂直滚动条来获取所需的所有垂直空间.
我自己可以使用PHP,Javascript,JQuery,但是我只能使用纯CSS解决方案.我不在乎它是否在IE中不起作用.
seb*_*kem 93
更新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的[other,old]解决方案设置图像容器的高度(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插件非常相似的解决方案.
Neo*_*isk 44
这是一个简单的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>
Max*_*Max 22
CSS3引入了相对于视口测量的新单位,在这种情况下是视窗.这些是vh和vw,分别测量视口高度和宽度.这是一个简单的CSS解决方案:
img {
max-width: 100%;
max-height: 100vh;
height: auto;
}
对此的一个警告是,只有在页面上没有其他元素贡献高度时它才有效.
Mar*_*ase 15
如果您愿意在图像周围放置容器元素,那么纯CSS解决方案很简单.你看,当父元素垂直延伸以包含它的子元素时,99%的高度没有意义.父级需要具有固定高度,例如......视口的高度.
HTML
<!-- 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%;
}
和小提琴一起玩.
eya*_*ler 11
对于后代，如果您想要一个能够回答 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>让它变得简单。谢谢
.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;
调整图像大小以适应屏幕的最长边保持其纵横比
img[src$="#fit"] {
width: 100vw;
height: auto;
max-width: none;
max-height: 100vh;
object-fit: contain;
}
width: 100vw - 图像宽度将为视口的 100%
height: auto - 图像高度将按比例缩放
max-height: 100vw - 如果图像高度超过视口，它将被减小以适应屏幕，因此图像宽度将由于以下属性而减小
object-fit: contain - 替换的内容被缩放以保持其纵横比，同时适合元素的内容框
注意：object-fit仅自 IE 16.0 起完全支持