gpt4 book ai didi

html - 基本上,我想要两列包含文本和图像,但第二列是倒置的

转载 作者:行者123 更新时间:2023-12-02 01:25:16 24 4
gpt4 key购买 nike

这是我的预期输出

enter image description here

我试图在不裁剪图像的情况下获得输出,这是我的代码

.blog-col-group {
display: flex;
}

.blog-col {}

.mod-vin-img {
width: 500px;
height: 700px;
}

.mod-vin-img>img {
object-fit: contain;
}
<body>
<div class="blog-container">
<div class="blog-col-group">
<div class="blog-col">
<p class="blog-paragraph">
What is not to love about this look? It is practical, stylish and allows you to play with a variety of table decor accessories.
</p>
<div class="mod-vin-img">
<img src="https://dummyimage.com/4000x5000/25db71" alt="img-1">
</div>
</div>
<div class="blog-col">
<div class="mod-vin-img">
<img src="https://dummyimage.com/800x1200/bf34bf" alt="img-2">
</div>
<p class="blog-paragraph">
It’s all about adding story and intrigue, with a touch of the eclectic.
</p>
</div>
</div>
</div>
</body>

看起来第一张图片不会调整大小,但其余的已经就位了。预先感谢您的帮助。

最佳答案

width 移动到 .blob-col 以统一图像和段落之间的宽度。

将 img 的高度和宽度设置为 100%。

object-fit 从包含更改为覆盖,以避免出现空格。

.blog-col-group {
display: flex;
}

.blog-col {
width: 500px;
}

.mod-vin-img {
height: 700px;
}

.mod-vin-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
<body>
<div class="blog-container">
<div class="blog-col-group">
<div class="blog-col">
<p class="blog-paragraph">
What is not to love about this look? It is practical, stylish and allows you to play with a variety of table decor accessories.
</p>
<div class="mod-vin-img">
<img src="https://dummyimage.com/4000x5000/25db71" alt="img-1">
</div>
</div>
<div class="blog-col">
<div class="mod-vin-img">
<img src="https://dummyimage.com/800x1200/bf34bf" alt="img-2">
</div>
<p class="blog-paragraph">
It’s all about adding story and intrigue, with a touch of the eclectic.
</p>
</div>
</div>
</div>
</body>

关于html - 基本上,我想要两列包含文本和图像,但第二列是倒置的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74873825/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com