html - 带有 2 个固定高度图像的 CSS 2 列布局

Question

我正在尝试以尽可能最好的方式实现附加图像中详细说明的结果，但由于某种原因，我找不到任何可以勾选所有框的解决方案。

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

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

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

Answer 1

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

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

希望能帮助到你

.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>