javascript – Bootstrap – 如何缩小图像以适应窗口高度?

前端之家收集整理的这篇文章主要介绍了javascript – Bootstrap – 如何缩小图像以适应窗口高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如何使图像溢出高度响应?

我有时拥有的图像长度很高,使窗口滚动条可见.

enter image description here

所以我想让这些高度响应 – 使图像按比例缩小以适应窗口高度.

enter image description here

可能吗?

CSS,

 html,body {
    height: 100%;
    margin: 0;
    padding: 0 0;
    border: 4px solid black;
}

.container-fluid {
    height: 100%;
    display: table;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    border: 4px solid blue;
}

.row-fluid {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    width: 100%;

    border: 4px solid red;
}

.centering {
    float: none;
    margin: 0 auto;
}

HTML,

最佳答案
您可以在img上使用height:100%和vertical-align:top,在父元素上使用height:100vh

body,html {
  margin: 0;
  padding: 0;
}

div {
  display: inline-block;
  height: 100vh;
  width: 100%;
  text-align: center;
}

img {
  height: 100%;
  vertical-align: top;
}
原文链接:https://www.f2er.com/css/427566.html

猜你在找的CSS相关文章