同一行中的水平和垂直照片

本文介绍了同一行中的水平和垂直照片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何将三张照片设置成这样:

仅当我在 css width: 100vh 中设置所有宽度时，照片才覆盖所有宽度，但中间照片不成比例(黑框显示我希望它的外观):

当我单独设置中间照片宽度时最糟糕，因为即使我设置了 100vh 宽度，一切都在破坏，看起来像这样:

这是HTML代码:

<div class="container-fluid"><div class="row justify-content-sm-center"><div class="col-lg-4 col-md-6 col-sm-12"><图类=描述"><a href=img/projects/home/1.jpg";数据灯箱=我的画廊"；data-gallery=multiimages"><img src=img/projects/home/test2.jpg"class=img-fluid img"></a></图>

<div class="col-lg-4 col-md-6 col-sm-12"><图类=描述"><a href=img/projects/home/2.jpg";数据灯箱=我的画廊"；data-gallery=multiimages"><img src=img/projects/home/test1.jpg"class=img-fluid img"></a></图>

<div class="col-lg-4 col-md-6 col-sm-12"><图类=描述"><a href=img/projects/home/3.jpg";数据灯箱=我的画廊"；data-gallery=multiimages"><img src=img/projects/home/test2.jpg"class=img-fluid img"></a></图>

我不知道该怎么做，也不会失去响应能力.

解决方案

您可以使用 Bootstrap Grid System 中的设置一列宽度.

文档如下:getbootstrap/docs/4.0/layout/grid/#setting-one-column-width

这将是代码(用图像或背景图像替换列值):

<div class="col">3 个中的 1 个

<div class="col-6">3 个中的 2 个(更宽)

<div class="col">3 中的 3

How set three photos like this:

The photos cover all width only if i set in css width: 100vh for all, but then middle photo is disproportionate (black frames show how i would like it to look like):

When i set middle photo width individually is worst because even i set 100vh width everything is breaking and it looks like this:

Here is HTMl code:

<main> <div class="container-fluid"> <div class="row justify-content-sm-center"> <div class="col-lg-4 col-md-6 col-sm-12"> <figure class="description"> <a href="img/projects/home/1.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a> </figure> </div> <div class="col-lg-4 col-md-6 col-sm-12"> <figure class="description"> <a href="img/projects/home/2.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test1.jpg" class="img-fluid img"></a> </figure> </div> <div class="col-lg-4 col-md-6 col-sm-12"> <figure class="description"> <a href="img/projects/home/3.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a> </figure> </div> </div>

I dont know how to it and not to lose responsiveness.

解决方案

You can use the Setting one column width in the Bootstrap Grid System.

Here's the documentation: getbootstrap/docs/4.0/layout/grid/#setting-one-column-width

This would be the code (Replace the column values with images or background-images):

<div class="row"> <div class="col"> 1 of 3 </div> <div class="col-6"> 2 of 3 (wider) </div> <div class="col"> 3 of 3 </div> </div>