BootStrap 4使不同大小的图像在列行中相同大小
Bootstrap是一个流行的前端开发框架，它提供了一套用于构建响应式和移动优先的网站和应用程序的工具和组件。Bootstrap 4是Bootstrap框架的最新版本，它具有许多强大的功能和改进。
在Bootstrap 4中，可以使用以下类来使不同大小的图像在列行中相同大小：
- 使用
img-fluid类：将img-fluid类应用于图像元素，可以使图像自动适应其父容器的大小，并保持其宽高比。这样，不同大小的图像将在列行中以相同的大小呈现。
例如：
<div class="row">
<div class="col-md-4">
<img src="image1.jpg" class="img-fluid" alt="Image 1">
</div>
<div class="col-md-4">
<img src="image2.jpg" class="img-fluid" alt="Image 2">
</div>
<div class="col-md-4">
<img src="image3.jpg" class="img-fluid" alt="Image 3">
</div>
</div>- 使用CSS样式：如果需要更精细的控制，可以使用自定义CSS样式来设置图像的大小。可以通过设置图像的
max-width和max-height属性来确保不同大小的图像具有相同的大小。
例如：
<style>
.same-size-image {
max-width: 100%;
max-height: 200px;
}
</style>
<div class="row">
<div class="col-md-4">
<img src="image1.jpg" class="same-size-image" alt="Image 1">
</div>
<div class="col-md-4">
<img src="image2.jpg" class="same-size-image" alt="Image 2">
</div>
<div class="col-md-4">
<img src="image3.jpg" class="same-size-image" alt="Image 3">
</div>
</div>以上是使用Bootstrap 4使不同大小的图像在列行中相同大小的方法。通过应用img-fluid类或自定义CSS样式，可以实现图像的自适应和统一大小，从而提升网站或应用程序的用户体验。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
我想知道如何在引导4中在lg中创建以下缩略图布局：
我有来自这个模板()的以下代码：
<div class="col-lg-6 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image1.jpg" alt="">
</a>
<div class="col-lg-3 col-md
浏览 0提问于2018-08-31得票数 3
回答已采纳
我有一排图像，在普通的大屏幕上可以很好地显示在屏幕上，但当我切换到较小的显示器时，它只会缩小图像，并使它们在小屏幕上保持水平。我该如何让它具有响应性，以便它在屏幕尺寸较小时垂直堆叠。 <div class="container">
<div class="imgRow">
<div class="d-flex justify-content-around">
<div class="col-sm-3 w-25">
<img
浏览 20提问于2021-04-12得票数 0
回答已采纳
1回答
我该如何实现我想要的效果呢？目前，我的代码如下所示：
HTML：
<div class="product-main-image">
<img id="product-zoomable-image"src="/images/image1.jpg" alt="无图片" class="img-responsive" data-BigImgsrc="/images/image1.jpg">
</div>
<div class="product-oth
浏览 0提问于2014-11-12得票数 0
我正在努力为我们的网站开发一个AMP。
我有一个问题，AMP旋转箭头在我的移动网站。
安培旋转木马箭头标记正在消失后，在移动版本的几秒钟。
我想把它展示出来。有谁能帮我实现这个目标吗。
<amp-carousel id="carousel-with-preview"
width="450"
height="300"
layout="responsive"
type="slides">
<amp-img src="images/image1.
浏览 1提问于2018-05-14得票数 4
回答已采纳
代码如下：
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
</div>
.crop{
float:left;
margin:2px;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
浏览 2提问于2012-11-26得票数 0
1回答
我已经用下面的代码响应了我的图片库：
<div class="line1">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
<img src="image3.jpg" alt="image3.jpg" />
<img src="image4.jpg" alt="image4.jpg
浏览 0提问于2012-11-27得票数 2
回答已采纳
我有一个父div，在响应的宽度和固定的高度，里面有一些图像。在运行时，我需要一个Jquery函数来计算div的宽度和高度，并将width (px)和height (px)参数应用于图像。也就是说，我现在的代码是
<div id="slider-wrapper" class="someclass">
<img src="/image1.jpg" alt="" />
<img src="/image2.jpg" alt="" />
<im
浏览 0提问于2012-07-27得票数 2
回答已采纳
4回答
如何使用类swiper-slide获取要插入到div中的第一个tt1的图像
只有第一个.swiper-slide的图像！
例如：
<div class="tt1"></div>
<div class="ss1">...</div>
<div class="ee1">
<div class="ee2">
<div class="swiper-slide">
<img src
浏览 5提问于2016-07-01得票数 0
回答已采纳
2回答
有人能帮我吗?我正在测试引导转盘，但它不工作。具体来说:上一页/下一页按钮不起作用，旋转木马不会滑到下一张幻灯片。这是我的页面代码，但我不知道我做错了什么。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!-- META -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="
浏览 1提问于2016-03-05得票数 3
回答已采纳
2回答
更改图片标题与相应的点击图像？
、、、、
我已经制作了一个有缩略图的图片库页面，当点击时，图像将显示在上面的主查看器上(这是我正在工作的)。在主查看器下面，显示了一个标题。但是，我希望它能够根据图像的不同而改变标题，我可以在javascript和HTML中添加什么来实现这一点？
例如，单击缩略图1，图像查看器显示图像1，标题显示标题1。
然后点击缩略图2，图像查看器显示图像2，标题显示标题2等。
HTML
<div class="containermain">
<img id="img-main" alt="main image" src="images/pla
浏览 4提问于2015-12-16得票数 0
回答已采纳
1回答
我使用的是，我有以下标记：
<div id="container">
<img id="main-image" class="cloudzoom" src="/img/image1.jpg" data-cloudzoom="variableMagnification: false, zoomOffsetX: 0, zoomPosition: 'inside', zoomImage: '/img-zoom/image1.jpg" />
<div id=&#
浏览 1提问于2017-12-07得票数 1
回答已采纳
我有一组由几个图像组成的图像，我想使用append，但我无法获得
<a href="image1.jpg" data-slb-active="1" data-slb-asset="1947037253" data-slb-internal="0"
data-slb-group="slb">
<img class="alignnone size-medium wp-image-527" src="image1.jpg" alt
浏览 2提问于2017-11-05得票数 0
3回答
<div class="row">
<div class="col-md-3">
<a class="mylink img-responsive" href="#"></a>
</div>
<div class="col-md-3">
<img src="/image1.jpg" class="img-responsive">
</di
浏览 0提问于2016-05-11得票数 1
2回答
我很难用javascript的方式显示我的照片。当我点击一张照片时，我得到的只是一个空白的模式弹出。我相信这是因为我仍然在学习javascript和相关的问题，但没有多大帮助。会感谢我得到的一切帮助
模态html码
<!-- photos -->
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#"
浏览 2提问于2016-03-21得票数 2
回答已采纳
2回答
我在foreach循环工作循环所有的图像根据以下html设计$galleryImage必须有最少的4个图像和class=“容器”只包含前4个图像和div隐藏-前4个图像将在每个container_rm的前4个图像1到1，并以相同的方式保留。这就是我想要实现的目标 <?php
$galleryImage = array(
'1' => 'image1.jpg',
'2' => 'image2.jpg',
'3' => 'im
浏览 23提问于2020-01-05得票数 0
回答已采纳
我已经创建了一个小的php文件，它将显示我想要在每个产品页面上显示的“客户也已购买”的产品列表。然而，我想排除在产品页面上显示为“也购买”的相同产品。
这是我创建的php文件，它在页面加载时加载一个随机产品：
THIS FILE IS CALLED "**products.php**"
<?php
// Customers also bought
$product1 = '<a href="../images/image1.jpg" class="zoom">
<img src=
浏览 0提问于2015-08-19得票数 1
1回答
我的网格图片库每行有四个图像。在CSS的宽度:25%使宽度响应性，但我需要的高度也是响应性。目前我的身高是180px。我可以将其设置为百分比以使其像宽度一样具有响应性吗？我试过了，但当我将其设置为百分比时，它不起作用。只有当我将高度:x%移动到line1 img /line1 2 img时，它才能工作，但是图像会被压缩。
<div class="line1">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt=
浏览 1提问于2012-11-26得票数 0
回答已采纳
2回答
我在一行中使用了一组if图像。在这些图像上方有一个文本框输入，根据该输入我需要启用/禁用图像？如何在React中做到这一点。
我试着在图片标签和disabled=true中添加"disable“，但是都不起作用。
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1
浏览 23提问于2019-03-28得票数 1
回答已采纳
我是bootstrap的新手。我正在尝试创建一个包含一些令人惊叹的艺术的画廊。但是，我面临着一些问题。所有的列都占据相同的高度，即使图像不是那么大。如何删除多余的空格？
<div class="container-fluid">
<div class="row content" id="images">
<div class="col-md-4">
<img src="..\images\allyson-beaucourt-HaD6z
浏览 0提问于2021-01-25得票数 0
2回答
因此，我试图定位我的内容框，它在左边可以正常工作，但是当我尝试更改右边的值时，它不允许。正如你所看到的，我有四张图片，但我想显示三张，因此我试图增加正确的值，这样这个盒子只能容纳三张(并且把它带到中心一点)。
我可以把它改为填充物，而不是正确的，但我不明白为什么会起作用？我的理解是:填充=内容和边界之间的距离，右=距离边缘有多远？
图片：
这是我的内容框代码(图像在另一个框中)
.imagesArea {
position:relative;
top:15px;
left:100px;
padding-right:180px;
}
谢谢
编辑: html
浏览 4提问于2014-08-03得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
