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.
the html code
<body>
</section>
<section class="main" 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 css code
<style>
#section1 {
height: 580px;
width: 1519px;
background-color: #0E2E3B;
padding: 50px;
}
</style>
>Solution :
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 class="main" 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 class="img" src="pancasila.jpg">
</section>
</body>
CSS
.container{
width:100%;
height:60px;
overflow:hidden;
}
.img {
width:100%;
}