Блог

Главная - Вопросы по программированию - Как сделать раздел таким же большим, как его фоновое изображение, чтобы показать его целиком?

Как сделать раздел таким же большим, как его фоновое изображение, чтобы показать его целиком?

#html #css

#HTML #css

Вопрос:

Я хочу показать изображение в полном размере в разделе на моем веб-сайте, на котором ничего нет. Итак, я создал пустой раздел и установил его в качестве фона, затем поместил столбец плюс прозрачный элемент, затем установил отступы и поля.

Я прилагаю изображение того, как оно выглядит прямо сейчас. Это два раздела (приведенный выше приведен только для справки. И не в коде)

Там, где находится изображение, находится пустой раздел только с фоном, и это раздел, который я хочу сделать таким же большим, как изображение. Прямо сейчас, как вы можете видеть, он вырезан.

введите описание изображения здесь

Как я могу сделать размер раздела таким же большим, как и его фон, без необходимости помещать в него элементы и использовать код?

Я уверен, что должен быть лучший способ с помощью CSS.

 <div class="content content--padding-large" style="background-color: rgb(255, 255, 255); padding: 0px;" id="_2odptjbtq">
        <div class="background_changer background_changer--blur0 js-bg-next-gen" alt="" style="opacity: 1; background-image: url(amp;quot;//d1aettbyeyfilo.cloudfront.net/ladynetwork/15398563_1607856820728Background.webpamp;quot;);" data-bg="url(amp;quot;//d1aettbyeyfilo.cloudfront.net/ladynetwork/15398563_1607856820728Background.webp" data-was-processed="true"></div>
        <div class="background_changer_overlay" style="background-image: none;"></div>
        <div class="container">
            
            
        <div class="row background_changer--blur0" data-component="grid" alt="" style="background-color: rgba(0, 0, 0, 0); border-radius: 0px; border-style: none; border-width: 0px; margin-top: 0px; margin-bottom: 0px; background-image: none; opacity: 1;"><div class="col-md-12 colView"><div class="js_kartra_component_holder">
<div data-component="divider">                            
    <hr class="kartra_divider kartra_divider--border-extra-tiny kartra_divider--border-dim-black-opaque-25 pull-center kartra_divider--full" style="border-color: rgba(33, 33, 33, 0); border-top-style: solid; border-top-width: 1px; margin: 80px 0px 55px;">
</div>
<div data-component="divider">                            
    <hr class="kartra_divider kartra_divider--border-small kartra_divider--border-royal-blue-two pull-center kartra_divider--full" style="border-color: rgba(49, 110, 212, 0); border-top-style: solid; border-top-width: 5px; margin: 0px;">
</div>
</div></div></div>
</div>
    </div>

Комментарии:

1. пожалуйста, добавьте свои фрагменты кода, чтобы мы могли вам помочь.

2. Пожалуйста, поделитесь своим кодом

3. Вы также можете попробовать что-то вроде min-width: 100%; max-width: 100%; для оформления

4. @coderboy спасибо за совет. Я только что поделился этим.

Ответ №1:

Попробуйте применить к нему этот стиль

style="min-width: 100%!important; max-width: 100%!important;"