Bootstrap 4-在屏幕上以80%的屏幕高度连续显示3个图像
Bootstrap 4是一个流行的前端开发框架，它提供了丰富的CSS和JavaScript组件，用于快速构建响应式和美观的网页界面。在屏幕上以80%的屏幕高度连续显示3个图像，可以通过以下步骤实现：
- 使用Bootstrap的网格系统：Bootstrap的网格系统是一种响应式布局工具，可以将页面划分为12个等宽的列。首先，将页面分为3列，每列占据4个列的宽度。
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 第一个图像 -->
</div>
<div class="col-md-4">
<!-- 第二个图像 -->
</div>
<div class="col-md-4">
<!-- 第三个图像 -->
</div>
</div>
</div>- 设置高度为80%：为了使图像占据屏幕高度的80%，可以使用CSS的
height属性和vh单位。
<style>
.image-container {
height: 80vh;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4 image-container">
<!-- 第一个图像 -->
</div>
<div class="col-md-4 image-container">
<!-- 第二个图像 -->
</div>
<div class="col-md-4 image-container">
<!-- 第三个图像 -->
</div>
</div>
</div>- 添加图像：在每个图像容器中添加图像。
<div class="container">
<div class="row">
<div class="col-md-4 image-container">
<img src="image1.jpg" alt="图像1">
</div>
<div class="col-md-4 image-container">
<img src="image2.jpg" alt="图像2">
</div>
<div class="col-md-4 image-container">
<img src="image3.jpg" alt="图像3">
</div>
</div>
</div>这样，使用Bootstrap 4的网格系统和自定义的CSS样式，就可以在屏幕上以80%的屏幕高度连续显示3个图像。
关于Bootstrap 4的更多信息和使用方法，可以参考腾讯云的相关产品和文档：
- 腾讯云产品：云开发（CloudBase）
- Bootstrap 4官方文档：https://getbootstrap.com/docs/4.0/getting-started/introduction/
相关·内容
1回答
Bootstrap 4-在屏幕上以80%的屏幕高度连续显示3个图像
javascript、html、css、twitter-bootstrap、grid
我有几个问题关于网站，这是我做与Bootstrap 4的帮助。我想使简单的页面只使用屏幕空间(没有滚动除移动版本)与标志在页面的中上部，全宽导航栏，然后2行的3全宽图像，这将被裁剪为分辨率允许。-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap
浏览 0提问于2018-01-23得票数 1
1回答
@2x和-568 h@2x图像与普通图像有何不同？
ios、objective-c
如果我正在编写一个iPhone应用程序，我必须在带有视网膜显示器的设备上使用"@2x"后缀，为iPhone 5应用程序使用"@-568h@2x"。这些图像应该有什么不同？我是否应该制作双长双高的图像(80x40 -> 160x80)？那么"-568h@2x"呢？谢谢你的帮助！
浏览 1提问于2013-08-01得票数 0
回答已采纳
1回答
基于分辨率(高宽比)的比例图像
image、math、image-processing、autohotkey、gdi+
因此，我将提供点表格数据，试图传递我的问题。1024×768aspect img1.png分辨率=4:3图像= 43x43 pixels1920×1080aspect img3.pn
浏览 0提问于2021-10-04得票数 0
5回答
用不拉伸的图像填充div
html、css、image
我有一个高分辨率(width: 5540px, height: 2680px)的图像，我需要这个图像覆盖整个div (这个div的宽度和高度的80% )。该图像显示在屏幕上，分辨率为768 of至1600 of。
当我使用background-size: cover时，图像会变宽，但底部会被切断。当我使用background-size: contain时，
浏览 1提问于2017-03-30得票数 2
回答已采纳
1回答
divs中图像的全宽度和高度
jquery、css、background、fullscreen
我做了这个设置，我需要一些图像，始终是全屏(缩放，以适应)的div，是放置在里面。这就是我已经走了多远，无论我做什么，我都不能让它开始工作。我真的希望有人能帮我解决这个问题，这让我发疯了！我试着输入这样的代码 -webkit-background-sizecover; -o-background-size:
浏览 1提问于2012-11-15得票数 0
4回答
使用C#和.NET环境获得jpeg图像的分辨率？
.net、jpeg、resolution
我们的客户将上传要打印在他们的文档上的图像，我们被要求想出一种方法来获得图像的分辨率，以便警告他们图像的分辨率太低，并且在最终产品中会看起来像素化。
浏览 1提问于2008-09-23得票数 6
回答已采纳
1回答
强制引导程序列留在容器中
html、css、bootstrap-5
我正在尝试使用bootstrap 5显示一些照片的两行层次结构。然而，图像不是停留在容器中，而是溢出。我希望容器充满屏幕，这样它就可以作为封面显示，而用户不必滚动。如何让它们动态调整大小以适应容器？<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.m
浏览 10提问于2021-07-21得票数 1
2回答
将图像与屏幕高度相匹配
html、css
我在试着把图像缩放到屏幕高度。我使用style="max-height:100%; width:auto; display: block;"将其与屏幕高度相匹配，并使用margin:0px auto;将其居中。我将非常感谢您的帮助！
浏览 5提问于2014-04-08得票数 3
回答已采纳
2回答
CSS -如果屏幕是横向的，如何设置图像的最大高度；如果是纵向的，如何设置最大宽度？
html、css、image、height、width
我试图创建一个基本的，静态的网页，有一个标题，下面的图像，和几行文字。使用1920x1080显示器上的互联网浏览器，CSS规则height: 70%;可以使图像充满大部分屏幕，同时保持标题和文本可见，而不会导致页面滚动。但是，如果仅使用此规则，则在我的手机上纵向显示时，图像会向右溢出，并会出现滚动条。按照max-width: 80%;正文规则的规定，图像<
浏览 43提问于2020-12-04得票数 0
3回答
缩放和对中不同尺寸的图像，在CSS中使用右对齐的文本。
javascript、html、css、angular
我试图创建一个页面，其中图像在左边，标题(文本)在右边，图像/文本结合在一起，以页面为中心。我面临的挑战是，图像可以是任意大小或纵横比。我需要尽可能大的图像(同时仍然适合在屏幕上，而不需要用户滚动)。图像高度可以用javascript确定(我用的是角)。我在这里勾画了三个场景：图像可以是纵向方向(高度>
浏览 5提问于2020-02-01得票数 0
回答已采纳
2回答
使用Autolayout更改UImageView大小
ios、iphone、autolayout、xcode8
我有一个图像视图在开始和下面，有一系列的按钮垂直放置在另一个下面。因此，在设计屏幕时，我将所有视图放在视图控制器中，并添加到垂直堆栈中。以水平和垂直为中心的堆栈视图。对于所有的按钮，我设置了相同的宽度。在堆栈视图中，我给出了相等的间距。在所有的iPhones中，它都正确地使用ui元素，除了iPhone4之外，ui元素的空间是相同的。在iPhone
浏览 5提问于2017-05-18得票数 0
回答已采纳
2回答
当图像调整大小时，像素会发生什么变化？
python、image、opencv、image-processing、filter
我有这张大小为800 x 600 of的原始图像我要做的是把图像调整到625x480 to，过滤所有的陆地区域。我发现土地部分的BGR值为(95,155,212)。这是我用来过滤所有和区域的代码：如果我先调整大小，然后过滤，下面是输出：如果我先过滤，然后调整大小，我就得到了我想要的输出：因此，我的
浏览 2提问于2015-06-29得票数 2
1回答
如何阻止Bootstrap Nuget包影响HTML框高度
html、css、asp.net、asp.net-mvc、twitter-bootstrap
我正在使用bootstrap Nuget包来提供CSS样式，但在排除故障后，我发现它导致了盒子模型的大小问题。我在管理面板上工作，系统管理员可以在其中登录以执行管理任务；例如查看预订、查看用户数据等。当我查看页面时，宽度适合屏幕，但高度非常短，它似乎呈现为1366x215.5，而我预计它会充满显示。值得注意的是，我使用的是实体框架控制器(带有预先生成的视图)，因此我使用IFrame从管理控制器显示E
浏览 26提问于2020-04-01得票数 0
回答已采纳
1回答
iPhone Safari缩放分辨率
html、ios、css、iphone、safari
我是网页设计界的新手，我已经开始学习HTML和CSS了。我已经开始从零开始建立自己的网站，目前我对如何在不同的平台上扩展设计感到困惑。当我在iPhone 7上浏览我的网站时，我的内联模块图像能够以2行的方式并排坐在一起。我不明白，当它们的高度和宽度都被设置为400px时，这怎么可能。我附上了一张来自chrome dev tools的开发人员屏幕截
浏览 14提问于2018-02-12得票数 0
1回答
根据父div大小按比例调整图像大小
javascript、jquery、jquery-ui、css
我使用全浏览器宽度高度jquery blockUI来显示从图库中选择的图像。下面的图像是blockUI中的视图方案。图像的宽度和高度设置为100% (但我知道这是错误的)。
我在这
浏览 1提问于2011-11-15得票数 5
回答已采纳
3回答
宽度和高度要响应的图像说明
html、css、image
有人能给我解释一下图像是响应性的概念吗？我们应该为图像使用宽度和高度，有些人告诉我，.it使用图像的宽度和高度是不正确的，谁能详细说明。
浏览 0提问于2019-11-08得票数 0
1回答
如何根据屏幕尺寸自动调整页面上4个不同宽度图像的大小
jquery、html、css、image
我在页面上有4个图像(在包装器div中)，并希望它们根据屏幕大小/宽度调整大小。(即在较小的屏幕上缩小它们)。但是我的4张图片是不同的宽度(但是它们的高度都是200px)，所以如果我使用上面的技术，它们的显示高度会根据它们的不同宽度而不同(这是我不想要的)。首先是在宽/正常
浏览 0提问于2014-01-02得票数 0
1回答
当监视不同尺寸时，Span墙纸会失败
wallpaper
当使用单位本身的“跨度”或氮工具将墙纸分散在两个显示器上时，我会得到以下效果。有办法解决这个问题吗？我尝试使用4k和8k图像，结果完全相同。我的显示器的分辨率是1920 x 1080和1024 x 768。
浏览 0提问于2016-04-16得票数 0
回答已采纳
1回答
滚动时保持图像在顶部
javascript、css、image、html、scroll
我有一个使用DIV进行布局的页面，它基本上由页眉(菜单)、左窗格(大约20%的页面宽度)、右窗格(剩余的80%)和页脚组成。页面的高度大约是2-3个屏幕高度，所以它是可滚动的。看起来像是。我在左侧窗格<div>中看到的是一张占据屏幕高度约40%的图像。我想图像基本上是“滑动”<em
浏览 2提问于2011-11-04得票数 2
回答已采纳
2回答
Corona SDK - Android的闪屏不是全屏
android、coronasdk、game-engine、splash-screen
在我的Corona SDK应用程序中，我已经添加了推荐的所有大小的闪屏。
它在iOS设备(iPhone/iPad)上运行良好。但在安卓设备上，闪屏的顶部和底部都有一个黑条。有谁知道如何在Android设备上修复这个问题？任何帮助都是非常感谢的。
浏览 0提问于2014-01-01得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
