Question

https://i.stack.imgur.com/aataw.png” rel=“nofollow noreferer”>samplegram

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-8 col-10">
                    <div class="row justify-content-center g-4">
                        <div class="col-lg-6 col-md-6 col-6">
                            <img class="width-10" src="/image-500x500.png" alt="">
                        </div>
                        <div class="col-lg-6 col-md-6 col-6">
                            <img class="width-10" src="/image-500x500.png" alt="">
                        </div>
                        <div class="col-lg-12 col-md-12 col-12">
                            <img class="width-10" src="/image-1000x500.png" alt="">
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-4 col-10">
                    <div class="row justify-content-center"> 
                        <div class="col-lg-12 col-12">
                            <img class="width-10" src="/image-500x1000px.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>

This is my sample code. I hope there are people who can help me solve my question. Thank you.

Want to images tops and bottoms are on the same horizontal line

Answer 1

这是100%的宽度、反应性和非波束装置解决办法。它很简单,没有诱杀装置,因此使其比需要更加复杂?

你们的样本形象问题在于,如果图像之间存在差距,数学就不会奏效。你们是否想要把一、二行之间的差距描绘成一个小数10 000帕左右的人? 或者,你是否希望底部的广度形象略低于500px? 两者都是可能的。

I went with the first option, having the tall image be a little taller. So I have placed it inside a container which then allows me to use object-fit: cover;.

body {
  margin: 20px;
}
.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.layout>*:nth-child(3) {
  grid-row: 2;
  grid-column: 1 / span 2;
}

.layout>*:nth-child(4) {
  grid-row: 1 / span 2;
  grid-column: 3;
}

.layout img {
  max-width: 100%;
}

.layout>*:nth-child(4) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="layout">
  <img src="https://picsum.photos/500">
  <img src="https://picsum.photos/500">
  <img src="https://picsum.photos/1000/500">
  <div>
    <img src="https://picsum.photos/500/1000">
  </div>
</div>

友情链接