Putting an Image inside of a Div block

In summary, you should be able to make the image any size that you want but it would help if you post your code.
  • #1
Dave Ritche
70
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
  • #2
  • Like
Likes Dave Ritche
  • #3
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:
  • #4
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
  • #5
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!
 
  • #6
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.
 
  • #7
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."
 
  • #8
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.
 

What is a div block?

A div block is a basic HTML element that allows you to group and organize other elements within a web page. It is commonly used for layout purposes.

How do I put an image inside of a div block?

To put an image inside of a div block, you can use the <img> tag and place it inside the div block using HTML. You can also use CSS to style the image and the div block as desired.

Why should I put an image inside of a div block?

Putting an image inside of a div block can help with organization and styling of your web page. It allows you to easily position and manipulate the image within the block, and also helps with responsiveness on different screen sizes.

Can I put multiple images inside of a div block?

Yes, you can put multiple images inside of a div block by using separate <img> tags and adjusting their positioning and size using CSS.

Is there a limit to the size or type of image I can put inside of a div block?

There is no specific limit to the size or type of image you can put inside of a div block. However, it is important to consider the overall performance and loading speed of your web page when using large or high-resolution images.

Similar threads

B Infrared Detectors & The 2nd Law of Thermodynamics
    • Thermodynamics
5
Replies
152
Views
5K
Chemistry 35yo combustion chemistry PhD, free time and still no plan
    • STEM Career Guidance
Replies
4
Views
1K
How Does Great Lakes Earth's Geography Differ from Our Own?
    • Sci-Fi Writing and World Building
Replies
2
Views
2K
More candidate cosmic string lens pairs in HUDF
    • Beyond the Standard Models
Replies
2
Views
2K
Exhaust and engine accoustics for asthetics and performance
    • General Engineering
Replies
2
Views
6K
It all began with an end - New theory on origin and future of the universe
    • Cosmology
Replies
10
Views
5K
Mathematica This Week's Finds in Mathematical Physics (Week 264)
    • MATLAB, Maple, Mathematica, LaTeX
Replies
6
Views
3K
Mathematica This Week's Finds in Mathematical Physics (Week 231)
    • MATLAB, Maple, Mathematica, LaTeX
Replies
5
Views
2K
Mathematica This Week's Finds in Mathematical Physics (Week 231)
    • MATLAB, Maple, Mathematica, LaTeX
Replies
5
Views
2K

Hot Threads

Recent Insights

Back
Top