在引导中与DIV完全对齐和缩放图像
在引导中与DIV完全对齐和缩放图像
提问于 2020-04-18 07:52:38
我试图在引导Joomla模板的div中插入8个图像和一个按钮。我需要的图像是垂直对中和水平均匀地对齐在所有响应视图(移动，平板电脑，小型笔记本电脑，大屏幕与最大192 of的with)。这是我的考试网站：
webdisenjo.nl和徽标div是“模版logos_home”。
我在为图像应该是什么以及如何在div中放置它们而奋斗。
现在，我试过这门课了。
<div class="logo-inline-div"><img src="images/logo/Logo_3WO.png" /></div>
但效果不佳。
我也试过这门课
<div class="row"><div class="col-8"></div></div>
.col-8{width: 10%;}但这也是行不通的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-04-18 08:32:21
我已经清理了您的代码，并添加了类clients-section。
因此，只要在logos_home中添加下面的html，并使用这个css，它就会如下所示
<div class="custom logos_home">
<div class="row clients-section">
<div class=""><img src="/images/logo/Logo_3WO.png" alt="pubblikvos Logo_3WO"></div>
<div class=""><img src="/images/logo/Logo_ACP.png" alt="pubblikvos Logo_ACP"></div>
<div class=""><img src="/images/logo/Logo_Amvest.png" alt="pubblikvos Logo_Amvest"></div>
<div class=""><img src="/images/logo/Logo_CBRE.png" alt="pubblikvos Logo_CBRE.png"></div>
<div class=""><img src="/images/logo/Logo_Fine-Hotels-Suites.png" alt="pubblikvos Logo_Fine-Hotels-Suites"></div>
<div class=""><img src="/images/logo/Logo_Greystar.png" alt="pubblikvos Logo_Greystar"></div>
<div class=""><img src="/images/logo/Logo_MiCompany.png" alt="pubblikvos Logo_MiCompany"></div>
<div class=""><img src="/images/logo/logo_NS.png" alt="pubblikvos logo_NS"></div>
</div>
<div><a class="knop_alle-clienten" href="/nl/projecten">Alle clienten</a></div>
</div>
.clients-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
}
.logos_home {
text-align: center;
}
a.knop_alle-clienten {
margin: 40px 0 0;
display: inline-block;
}Stack Overflow用户
发布于 2020-04-18 08:03:29
如果您有一组照片位于一个div中，并且希望它们在任何时候都是相同的大小，则需要将这些图像大小相同，或者强制它们保持相同的大小。
您可以轻松地用div包装图像，然后给它一个display:flex；和flex-wrap:wrap；
然后给图像一些宽度:例如，如果你想每一行4张照片，每幅图像的宽度为25%。
Stack Overflow用户
发布于 2020-04-18 10:00:56
div.logo-inline-div {
text-align: center;
margin: auto;
padding: 16px 24px 10px 10px;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.col-1 {
width: 12.4%;
}
img {
width: 100px;
height: 200px;
object-fit: cover;
}
@media screen and (max-width: 680px) {
.col-1 {
width: 100%;
margin: 0;
}
div.logo-inline-div {
padding: 5px;
display: block;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="EightImages.css" />
<link rel="images" href="images" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61285872
复制相关文章
相似问题
腾讯云开发者
