javascript - 图像随屏幕高度自动调整大小,无滚动条 - CSS

标签 javascript html css

已经过去两天了。但我还没有找到任何解决方案。 条件是-

<强>1。没有滚动条(垂直或水平),

<强>2。屏幕高度未知,因此所有内容(图像和文本)都应根据屏幕高度自动调整大小,

我的代码在这里-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Quickstart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
    <!-- Bootstrap fremwork main css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
        #padding{
            padding: 15px;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        <div class="container">
            <div class="row">
                <div class="col-md-4" id="padding">
                    <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-4" id="padding">
                    <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-4" id="padding">
                    <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt="">
                </div>
            </div>

            <div class="row">
                <div class="col-md-4" id="padding">
                    <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-4" id="padding">
                    <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-4" id="padding">
                    <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt="">
                </div>
            </div>

            <div class="row">
                <div class="col-md-4" id="padding">
                    <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-4" id="padding">
                    <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-4" id="padding">
                    <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt="">
                </div>
            </div>

            <div class="row">
                <div class="col-md-12"><h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dignissimosus.</h2></div>
            </div>

        </div>  <!-- end container -->
    </div> <!-- end myDiv -->

</body>
</html>

我尝试过这个linkit .

由于内容(内容不多)大于屏幕高度,那么是否可以调整屏幕高度?

如果您有任何解决方案、建议或其他任何内容,请发表评论。

谢谢。

最佳答案

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

关于javascript - 图像随屏幕高度自动调整大小,无滚动条 - CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43152257/

相关文章:

javascript - Bootstrap Colorpicker,如何在下拉列表中设置颜色值框?

javascript - ruby rails 4 : Trouble with adding Javascript files in Rails web application

javascript - Moment.js 在特定时间创建弹出窗口

javascript - 如何在当前网页上创建和显示自己设计的窗口而不是弹出窗口?

javascript - 如何从@import url 中提取 CSS 样式

javascript - 如何停止在浏览器中打印到文件?

javascript - 如何在 html 页面中嵌入 .wmv 并使用 javascript 播放/停止/更改文件?

html - CSS 目标主题

java - 获取 css 内容,然后为链接 validator 解析外部 css 文件的图像引用

jquery - CSS:水平居中固定按钮,并为顶部边距设置动画。