html - 如何在我的主题 Bludit 中更改图像的宽度？

问题描述

我正在开发一个名为 bludit 的新 CMS。我已经为这个 cms 选择了一个主题，但我仍然需要对其进行一些修改。现在，我正在尝试使图像占据屏幕的整个宽度：Visuel 网站

在这里您可以看到原始标题图像的代码：

<section class="page">
<div class="container">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="content-card">

                <!-- Page cover image -->
                <?php if ($page->coverImage()): ?>
                <div class="page-cover-image mb-4"
                    style="background-image: url('<?php echo $page->coverImage(); ?>');">
                    <div style="height: 400px;"></div>
                </div>
                <?php endif ?>

当我尝试使图像占据所有宽度但下面的文本保持这些尺寸时，我在逻辑上尝试将 div 从容器的图像以及这个 col-lg-8 中取出。这是我尝试过的：

<div class="container-fluid">
    <div class="row">

        <!-- for the image take all the width -->
            <div class="containerImage col-lg-12">
                <div class="header-image">
                    <div class="contenu">

                        <!-- Page cover image -->
                        <?php if ($page->coverImage()): ?>
                            <div class="page-cover-image mb-4"
                            style="background-image: url('<?php echo $page->coverImage(); ?>');">
                            <div style="height: 400px;"></div>
                            </div>
                        <?php endif ?>
                    </div>
                </div>
            </div>

    </div>
</div>

和 CSS ：

.page-cover-image {
    width: 100%;
}

.contenu {
    width: 100%;
}

但我不明白为什么没有效果......有人知道这个问题吗？也许是特定于 CMS 的左边距？大概是我搞错了……

非常感谢您提前。

          Sofia R.

标签： htmlcsscontent-management-system

html - 如何在我的主题 Bludit 中更改图像的宽度？

问题描述

解决方案

推荐阅读