使用引导程序和 CSS 使图像布局更有条理答案

【问题标题】：Make the image layout more organized using bootstrap and CSS使用引导程序和 CSS 使图像布局更有条理
【发布时间】：2017-08-07 21:45:40
【问题描述】：

所以我基本上使用手动百分比来使这些图像紧挨在一起。如您所见，它们的布局或组织不是很整齐。如何让它看起来更潇洒？

代码如下：

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">


    <div class="container">
        <div class="row">
            <div class="col-lg-2">
                <img src="./assets/img/glass.jpg" class="img-responsive " style="width:95%"/>
                <img src="./assets/img/rift.jpg" class="img-responsive m-y-1" style="width:95%;"/>

            </div>
            <div class="col-lg-8">
                <img src="./assets/img/mhacks.jpg" class="img-responsive" style="width:100%; "/>
            </div>

            <div class="col-lg-2">
                <img src="./assets/img/mindwave.png" class="img-responsive" style="width:120%;"/>
                <img src="./assets/img/VR.png" class="img-responsive m-y-1" style="width:120%;"/>

            </div>
        </div>
    </div>



</div>

如下所示： http://imgur.com/e2I3yLu

这里也是网站的链接： monajalal.github.io

非常感谢任何建议。我想知道是否有更直接的图像布局方法或任何自动方法？

【问题讨论】：

您需要在其他地方生成具有精确宽度和高度的缩略图，无论纵横比如何，您都无法实现有组织的布局。
作为一种简单的方法，您可以使用具有精确宽度和高度的 DIV 和 overflow:hidden 替换图像，并将图像放入其中，以便在视觉上裁剪图像。
试试这个网站以轻松调整图像大小：images.weserv.nl。也可以使用它使所有图像大小相同。
@AliSheikhpour 我是初学者，所以如果你能提供一个 jsfiddle 会更有帮助！
@JoostS 我们可以从 CSS 方面做些什么吗？还是引导端？

标签： html css twitter-bootstrap layout

【解决方案1】：

将每个图像设置为 div 中的背景图像：

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">
     <div class="container">
        <div class="row">
            <div class="col-lg-2">
                <div style="background: url('./assets/img/glass.jpg'); background-size: cover;" class="img-responsive"></div>
                <div style="background: url('./assets/img/rift.jpg'); background-size: cover;" class="img-responsive"></div>
            </div>
            <div class="col-lg-8">
                <div style="background: url('./assets/img/mhacks.jpg'); background-size: cover;" class="img-responsive-large"></div>
            </div>
            <div class="col-lg-2">
                <div style="background: url('./assets/img/mindwave.png'); background-size: cover;" class="img-responsive"></div>
                <div style="background: url('./assets/img/VR.png'); background-size: cover;" class="img-responsive"></div>
            </div>
        </div>
    </div>
</div>

然后设置这个css：

.img-responsive {padding-top: 60%; margin-bottom: 10px;}
.img-responsive-large {height: 208px; margin-bottom: 10px;}

@media screen and (max-width: 940px) {
  .img-responsive-large {height: auto; padding-top: 60%;}
}

【讨论】：

您的答案无效！你试过了吗？你能在 jsfiddle 中展示它吗？
这是我在 style.css 添加东西然后在 index.html imgur.com/mRoWpwv

【解决方案2】：

试试这个...我所做的是使用网格。使用列中的填充，甚至使用图像之间的边距，也将图像设置为 100% 宽度。类 img-responsive 将最大宽度设置为 100%，至少这样图像将填满列。

    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive"/>
                </div>
                <div class="col-lg-2">
                    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive "/>
                    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive m-y-1"/>

                </div>

                <div class="col-lg-2">
                    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive"/>
                    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive m-y-1"/>

                </div>
            </div>
        </div>
    </div>

删除内联样式 - 而是以 css 中的图像为目标并添加它。

.jumbotron img { width: 100%; margin: 15px 0; }

【讨论】：

您的代码不起作用！这是它将如何显示imgur.com/mtFaxyD
不确定您到底想做什么或想要获得的效果，但与其编码修复，不如尝试在 Photoshop 中打开照片并裁剪它们，使它们对齐。否则，纵向和横向图像将永远无法正确对齐。