How to add an image in only one section?-CodePudding

image cant seem to fit in just one section and keep overflowing to another section.

tried putting tag in between but does not seems to work, img keep showing in two section.also tried the width and padding but i can't move the img to the left. can anyone help with only css and html? can't use js on this project.

#section1 {
  height: 580px;
  width: 1519px;
  background-color: #0E2E3B;
  padding: 50px;
}

<body>
<section id="section1">
</section>
<section  id="section2" id="profil">
    <h1>Lorem</h1>
    <h2>Lorem</h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <img src="pancasila.jpg">
</section>
<body>

the html code

CodePudding user response：

If you want to have same ratio you should create a container and hide parts of the image. Follow like this with an additional CSS file. Tweak the parameters in the CSS file as you wish and you can get your desired results.

HTML

<body>
</section>
<section  id="section2" id="profil">
    <h1>Lorem</h1>
    <h2>Lorem</h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <img  src="pancasila.jpg">
</section>
</body>

CSS

.container{
  width:100%;
  height:60px;
  overflow:hidden;
}
.img {
  width:100%;
}

CodePudding user response：

Try adding some css for img. Also you first section doesn't seem to have opening tag.

img { width: 100% }