同一行中的水平和垂直照片 [英] Horizontal and vertical photos in same row

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

问题描述

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

仅当我在 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 中的设置一列宽度.

文档如下:https://getbootstrap.com/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: https://getbootstrap.com/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>

这篇关于同一行中的水平和垂直照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆