Member 12869110 Ответов: 2

Как заставить изображение расширяться, чтобы соответствовать контенту


Привет во первых я царь всех царей
а во вторых мне нужна помощь как сделать так чтобы изображение расширялось в соответствии с содержимым
например у меня есть изображение затем у меня есть контент я хочу чтобы изображение расширялось или повторялось расширяться было бы лучше

Что я уже пробовал:

Вот мой код:

<div id="about">
                    <img src="images/about-lightning-bg.png" width="100%">
                    <div class="insidecontent">
                        <h3 class="abouttittle">ABOUT BARAK STUDIOS:</h3>
                        <img src="images/Divider.png" class="divider">
                        <div class="aboutcontent">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis laboriosam dignissimos aliquid, voluptatum beatae at neque inventore voluptas aspernatur possimus, rem perferendis distinctio, mollitia vitae, iusto explicabo corrupti ex molestiae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati voluptates, ullam illum eligendi minus sed repellat quisquam accusantium fuga, fugiat odit dolorum quibusdam, ipsum nihil voluptas iure alias architecto necessitatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi saepe, delectus molestiae aperiam quaerat eligendi dolore. Reiciendis voluptates blanditiis accusamus officiis eos eligendi voluptate eum nisi sint, enim, earum vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet iusto similique, perferendis odio eaque minima a expedita debitis ipsa molestiae, magnam maiores ullam quam, voluptates tempora, veniam ab nobis. Libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit temporibus commodi reprehenderit, quod repellendus beatae iste eveniet rem, nemo dolores qui ullam. Distinctio sequi, quam fugit. Tempora et velit accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet magnam, aperiam tenetur dolore, natus nobis illum, sunt voluptates veniam animi dolores incidunt illo quasi perferendis iste saepe in provident, et. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt velit hic ex molestias quod. Ipsum ipsa ab, nostrum, odio dolor possimus, accusantium commodi repellendus accusamus iusto est. Assumenda, id, voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptates dolor rem cupiditate adipisci provident sapiente labore odio maxime voluptas. Ea dicta delectus aliquam at deleniti, deserunt optio nam est.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis laboriosam dignissimos aliquid, voluptatum beatae at neque inventore voluptas aspernatur possimus, rem perferendis distinctio, mollitia vitae, iusto explicabo corrupti ex molestiae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati voluptates, ullam illum eligendi minus sed repellat quisquam accusantium fuga, fugiat odit dolorum quibusdam, ipsum nihil voluptas iure alias architecto necessitatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi saepe, delectus molestiae aperiam quaerat eligendi dolore. Reiciendis voluptates blanditiis accusamus officiis eos eligendi voluptate eum nisi sint, enim, earum vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet iusto similique, perferendis odio eaque minima a expedita debitis ipsa molestiae, magnam maiores ullam quam, voluptates tempora, veniam ab nobis. Libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit temporibus commodi reprehenderit, quod repellendus beatae iste eveniet rem, nemo dolores qui ullam. Distinctio sequi, quam fugit. Tempora et velit accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet magnam, aperiam tenetur dolore, natus nobis illum, sunt voluptates veniam animi dolores incidunt illo quasi perferendis iste saepe in provident, et. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt velit hic ex molestias quod. Ipsum ipsa ab, nostrum, odio dolor possimus, accusantium commodi repellendus accusamus iusto est. Assumenda, id, voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptates dolor rem cupiditate adipisci provident sapiente labore odio maxime voluptas. Ea dicta delectus aliquam at deleniti, deserunt optio nam est.</p>
                        </div>
                    </div>
                </div>



изображение, которое имеет ширину 100%, - это изображение в фоновом режиме, так что вот мой css

#about {
    position: relative;
}

.insidecontent {
    position: absolute;
    top: 79px;
}

.abouttittle {
    margin: 0 auto;
    display: block;
    width: 32%;
font-family: 'Roboto Slab', serif;    color: white;    font-weight: bold;

    text-shadow: 1px 1px 1px black;
}

.divider {
    margin: 0 auto;
    width: 53%;
    display: block;
}

.aboutcontent {
    width: 80%;
    margin: 0 auto;
font-family: 'Roboto Slab', serif;    color: white;
    text-shadow: 1px 1px 1px black;
    font-weight: bold;
}

#tapbackground {
    background: url(images/Watch-Now-BG.png);
    display: inline-block;
    padding: 10px;
}



внутренний контент приносит его поверх изображения, поэтому я сделал width:fit-content на #about, но это не сработало, я хочу, чтобы он работал так, что если я добавлю больше контента, мне не придется продолжать делать его все больше и больше, и больше, и больше, и больше, спасибо Вам большое

Member 12869110

кто-нибудь может мне помочь?

Cristina Carrasco Angulo

Нельзя добавлять раствор... :-С

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

.тело{
background-image: url (images / about-lightning-bg. png);
фон-размер: содержание;
}

2 Ответов

Рейтинг:
2

Cristina Carrasco Angulo

Вы можете поместить изображение в тег body:

1-удалить:

<img src="images/about-lightning-bg.png" width="100%">


2-Добавить к вам css:
.body{
    background-image: url(images/about-lightning-bg.png);
    background-size: cover;
}


Я надеюсь, что это поможет


Рейтинг:
2

Cristina Carrasco Angulo

вы можете поместить изображение в тег body с помощью css:

.body{
background-image:url(images/about-lightning-bg.png);
backgroudn-size: content;
}


и убрать:

<img src="images/about-lightning-bg.png" width="100%">


надеюсь, это поможет