Zee*_*han 6 css twitter-bootstrap
我尝试使用bootstrap将图像缩放到浏览器屏幕,就像这个网站一样.
通过设置
img {
max-width: 100%;
max-height: 100%;
}
它确实显示完整的图像,但也显示滚动.滚动通过以下方式得到反击:
body {
overflow-y: hidden;
overflow-x: hidden;
}
现在,问题是,我无法在屏幕上显示完整的图像.它会裁剪图像的某些部分(如果图像大于浏览器窗口).
有人帮我吗？谢谢.
您应该将图像的宽度和高度限制为屏幕尺寸。
我注意到您没有使用min-widthandmin-height属性，而是使用max-widthandmax-height
查看JS 小提琴
尝试以下代码：
body {
background:url("images/your_image.jpg"); // Your Image URL
min-height : 100%;
min-width : 100%;
background-size:100% 100%;
background-repeat:no-repeat;
overflow-y: hidden;
overflow-x: hidden;
}
你可以在这里找到它：JS Fiddle
希望这可以帮助 ！
Bootstrap具有img-responsive用于此目的的内置类。这适用max-width: 100%;, height: auto; and display: block;于图像，以便它可以很好地缩放到父元素。
html,
body {
height: 100%;
margin: 0;
padding: 1em;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<img class="img-responsive" src="http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg" />
</body>| 归档时间： |
|
| 查看次数： |
27616 次 |
| 最近记录： |