如何使图像扩展以适应内容 [英] How to make image expand to fit content

问题描述

首先，我是所有国王之王

和第二个我需要一些帮助我如何使图像扩展以适应内容

例如我有图像然后我有内容我希望图像扩大或重复扩大会更好虽然



我尝试过：



这是我的代码：

hi first of i am the king of all kings
and second of i need some help how do i make a image expand to fit the content
for example i have a image then i have content i want the image to expand or repeat expand would be better though

What I have tried:

Here is my code:

<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

the image that that has the width of 100% is the image in the background so here is my 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;
}

内容将它带到图像之上，所以我做了宽度：fit-content on #about但它不起作用我想让它工作，所以如果我添加更多的内容，我不必继续使它变得越来越大，越来越大，越来越大，谢谢你很多

inside content brings it on top of the image so i did width:fit-content on the #about but it did not work i want it to work so that if i add more content i don't have to keep making it bigger and bigger and bigger and bigger and bigger, THANK YOU VERY MUCH

推荐答案

您可以将图像放入正文标记：



1 - 删除：

You can put the image in the body tag:

1 - Remove:

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

2 - 加你的css：

2 - Add to you css:

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

我希望它有帮助

I hope it helps

你可以用css将图像放在body标签中：

you can put the image in the body tag with css:

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

并删除：

and remove:

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

希望有帮助

hope it helps

这篇关于如何使图像扩展以适应内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！