具有 2 个固定高度图像的 CSS 2 列布局

Question

我正在尝试以尽可能最好的方式实现所附图像中详述的结果，但由于某种原因，我找不到任何符合所有条件的解决方案。

桌面版 - 图片的高度固定为 600 像素，但宽度在调整大小时必须始终保持相同的纵横比。此外，带有标题、段落和按钮的左侧列是最先流动的，但是当它达到其最小宽度时，图像列必须开始调整大小。

在移动设备上，需要更改顺序以使按钮位于图像下方，但它们仍保持其宽高比以填充容器。

我尝试过使用 flex、grid，但我发现最接近的结果是使用旧的 display:inline-block，但是在切换块的顺序时会出现问题，这可以通过使用轻松修复弹性或网格。图片部分特别棘手。

Answer 1

我认为这可以通过引导类来实现。

我使用内置引导类在下面的代码 sn-p 中创建了一个演示。

希望对你有帮助

.heading,.paragraph,.buttons{
                    border: 1px solid #000;
                    padding: 15px;
                    background: #ccc;
                }
                
                .img-div img{
                    height: 600px;
                    width: 100%;
                }
                
                @media (max-width:767px){
                   .img-div img{
                        height: 300px;
                        width: 100%;
                    } 
                }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
                <div class="col-lg-5 col-md-5 col-sm-12 col-12">
                    <div class="heading">
                        <h1>Heading</h1>
                    </div>
                    <div class="paragraph">
                        <h1>Paragraphs</h1>
                        <p>Paragraph Content</p>
                    </div>
                    <div class="buttons d-none d-sm-block">
                        <h1>Buttons</h1>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                <button class = "btn btn-primary">Button 1</button>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                <button class = "btn btn-primary">Button 2</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-md-7 col-sm-12 col-12">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-sm-8 col-8">
                            <div class="img-div">
                                <img src="https://picsum.photos/500/600" height = "600" class = "img-responsive">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
                            <div class="img-div">
                                <img src="https://picsum.photos/500/600" height = "600" class = "img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-12 d-sm-none">
                        <div class="buttons ">
                            <h1>Buttons</h1>
                            <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                        <button class = "btn btn-primary">Button 1</button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                        <button class = "btn btn-primary">Button 2</button>
                                    </div>
                            </div>
                        </div>
                    </div>
                
            </div>