Putting an Image inside of a Div block

  • Thread starter Thread starter Dave Ritche
  • Start date Start date
  • Tags Tags
    Block Image
AI Thread Summary
The discussion revolves around a webpage design issue where the user is trying to fit an image inside a div that is set to 100% width of its parent wrapper, which is 60% of the page width. The user is unsure about the appropriate size for the image to ensure it fits correctly within the div. Suggestions include posting the code for better assistance and using CSS to set the image dimensions. It's recommended to specify the image width and height in percentages or pixels, with an example provided of using "width:100%;" to ensure the image scales properly within the div. Additionally, the importance of testing different image sizes for optimal display is emphasized. There are also comments on code cleanliness, such as reducing excessive blank lines and ensuring proper styling sections are included.
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 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 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

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

Hot Threads

Recent Insights

Back
Top