Putting an Image inside of a Div block

  • Thread starter Thread starter Dave Ritche
  • Start date Start date
  • Tags Tags
    Block Image
Click For Summary
SUMMARY

This discussion focuses on how to properly size an image within a div block in HTML and CSS. The main issue raised is the challenge of fitting an image into a div that is set to 100% width of its parent wrapper, which is 60% of the viewport width. A solution provided includes setting the image's width to 100% and height to a percentage, ensuring it scales correctly within the div. Additionally, the importance of testing various image sizes to achieve the desired visual effect is emphasized.

PREREQUISITES
  • Understanding of HTML structure and elements
  • Basic knowledge of CSS styling and box model
  • Familiarity with responsive design principles
  • Experience using browser developer tools for debugging
NEXT STEPS
  • Learn how to use CSS Flexbox for better layout control
  • Explore CSS Grid for advanced layout techniques
  • Investigate responsive image techniques using the srcset attribute
  • Study CSS media queries for adaptive design
USEFUL FOR

Web developers, front-end designers, and anyone looking to enhance their skills in responsive image handling and layout design.

Dave Ritche
Messages
70
Reaction score
6
Hello everyone!
I designed a webpage and set its main wrapper width to 60% and magin to auto.Inside this wrapper(div),i want to put an image.AS the wrapper-div size is 60%,i put another div inside it and set its width to 100%.The second div(image div) perfectly fit with wrapper-div. I don't know what should be the width of the image so that it fit in the div?I tried different sizes.For example,i used an online ox to % converter that tells 1%=1.6px.so for the 100% width of that div,i used 960px but it didn't work instead it became short.Does anyone have a solution?Please share with me!
Thanks!
 
Technology news on Phys.org
  • Like
Likes   Reactions: Dave Ritche
Borg said:
You should be able to make the image any size that you want but it would help if you post your code.
See this link - http://www.w3schools.com/html/html_images.asp

Mod note: I split up the HTML code and CSS code into separate code blocks. I'm assuming that these are separate files.

Here is the code BORG:
Code: 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="navbar.css" media="all" />
    <title>GPGC JHELUM</title>
</head>
<body>
<header>

</header>
<div class="main-wrapper">    <!---START OF THE WRAPPER--->

<nav>
<!--UL LIST SECTION IN THE NAV BAR-->
<ul class="main-list-container">                                           <!---LIST ITEMS CONTAINER---->
    <li class="list-items short"><a href="#">HOME</a></li>                          <!----LIST ITEMS INSIDE THE CONTAINERS OF NAV BAR---->
    <li class="list-items"><a href="#">FACULTY</a></li>
    <li class="list-items long"><a href="#">ADMITTION CRITERIA</a></li>
    <li class="list-items"><a href="#">PROSPECTUS</a></li>
    <li class="list-items short"><a href="#">CONTACT US</a></li>
</ul>

</nav>

<div class="college-image-div">                   <!---THE IMAGE SECTION INSIDE THE MAIN-WRAPPER--->
<img src="image.jpg" alt="" />
</div>
<div class="main-section"></div>                     <!--THE MAIN SECTION AFTER THE IMAGE SECTION IN THE MAIN WRAPPER-->

</div>
<footer>                           <!---FOOTER IS OUTSIDE THE MAIN-WRAPPER---></footer>
</body>
</html>

AND THE CSS:
Code: 
*{                          /* FOR  ALL*/

padding:0;
margin:0;

}
/*STYLING HEADER SECTION THAT IS OUTSIDE OF THE MAIN WRAPPER CONTAINING NAV BAR AND MAIN SECTION*/
header{           
width:60%;

background-color:#dfdfd0;
margin: 3% auto 0px auto;
height:150px;
padding:0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}/*STYLING MAIN WRAPPER */

.main-wrapper{

width:60%;
margin:0% auto 0% auto;
background-color:#dfdfd0;
height:2000px;
}

/*IMAGE SECTION JUST AFTER THE NAV BAR*/
.college-image-div{

    width:auto;
    height:400px;
    background-color:#0000b3;
}/*STYLING NAV BAR IN THE MAIN WRAPPER*/
nav{
    width:100%;
    height:40px;
    background-color:#023471;
}

.main-list-container{

    list-style-type:none;
}
.list-items{

    width:20%;
    float:left;
    height:40px;
    line-height:40px;
    text-align:center;

}
.short{                                 /*STYLING SPECIAL LIST-ITEMS IN THE MAIN NAV BAR*/
    width:17.5%;
}
.long{
    width:25%;
}
.list-items>a{
     text-decoration:none;
     text-align:center;
    color:#fffff2;
     display:block;
     font-weight:bold;
}

/*STYLING HOVER EFECTS FOR NAV BAR ITEMS */
.list-items>a:hover{
    background-color:#FFF;
    color:#023471;
}

/*FOOTER SECTION*/
footer{

    width:60%;
    height:150px;
    margin:auto;
    background-color:#265cff;
    margin-bottom:30px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
 
Last edited by a moderator:
I need to run but the first two things that I see are the lack of a style section and the excessive blank lines. Also, whenever I am faced with issues like this, I try to just build a sample page with only the stuff that I'm working on. That way you eliminate other things that might be affecting the view. Once you solve it that way, then put the solution into your working page.
 
  • Like
Likes   Reactions: Dave Ritche
Borg said:
I need to run but the first two things that I see are the lack of a style section and the excessive blank lines. Also, whenever I am faced with issues like this, I try to just build a sample page with only the stuff that I'm working on. That way you eliminate other things that might be affecting the view. Once you solve it that way, then put the solution into your working page.
Thanks!
 
Borg said:
the first two things that I see are the lack of a style section and the excessive blank lines
I split off the CSS code to a separate code block, and I deleted a lot of the extra blank lines.
 
Dave Ritche said:
<li class="list-items long"><a href="#">ADMITTION CRITERIA</a></li>
Dave, there is no such word as "admittion." The one you want is "admission."
 
You have a style on set for the outer div but you need to set width and/or height styles on the image. It can be an exact number of pixels or a percentage. If you set a percentage, it will fit itself within the div. For example, I used an image that was larger than the 400 px that you used for the div and it extended past the div. However, if I set the image with a height of 50%, it stays well within the div. For example:
<img src="image.jpg" alt="" style="width:100%; height:50%;" />

If you don't want it to expand to the entire width, just leave it off and the image will scale itself accordingly. Note that it's best to try several different sizes of images to make sure that you get the behavior that you're looking for.
 

Similar threads

High School Infrared Detectors & The 2nd Law of Thermodynamics
  • · Replies 152 ·
6
Replies
152
Views
11K
Chemistry 35yo combustion chemistry PhD, free time and still no plan
  • · Replies 4 ·
Replies
4
Views
3K
Exhaust and engine accoustics for asthetics and performance
  • · Replies 2 ·
Replies
2
Views
8K
How Does Great Lakes Earth's Geography Differ from Our Own?
  • · Replies 2 ·
Replies
2
Views
4K
Graduate It all began with an end - New theory on origin and future of the universe
  • · Replies 10 ·
Replies
10
Views
6K
Mathematica This Week's Finds in Mathematical Physics (Week 264)
  • · Replies 6 ·
Replies
6
Views
5K
Mathematica This Week's Finds in Mathematical Physics (Week 231)
  • · Replies 5 ·
Replies
5
Views
3K
Mathematica This Week's Finds in Mathematical Physics (Week 231)
  • · Replies 5 ·
Replies
5
Views
3K