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

Discussion Overview

The discussion revolves around the challenge of fitting an image within a div block on a webpage. Participants explore various approaches to ensure the image properly aligns with the dimensions of its containing div, addressing issues related to CSS styling and HTML structure.

Discussion Character

  • Technical explanation
  • Debate/contested
  • Homework-related

Main Points Raised

  • One participant describes their attempt to set an image within a div that is 100% of its parent wrapper's width, expressing confusion over the appropriate image size.
  • Some participants suggest that the image size can be adjusted freely, but emphasize the need for sharing code to diagnose the issue effectively.
  • Another participant recommends creating a simplified sample page to isolate the problem, suggesting that extraneous elements might be affecting the image display.
  • There is a correction regarding a spelling error in the navigation links, highlighting attention to detail in the code.
  • One participant advises setting specific width and/or height styles on the image itself, noting that using percentages can help the image fit within the div without exceeding its bounds.
  • Another participant shares an example of using inline styles to control the image dimensions, indicating that experimentation with different sizes is beneficial.

Areas of Agreement / Disagreement

Participants express various viewpoints on how to address the image sizing issue, with no clear consensus on the best approach. Some suggest specific CSS adjustments while others focus on code structure and simplification strategies.

Contextual Notes

Participants mention the lack of a style section in the provided code and excessive blank lines, which may contribute to the confusion. There is also an indication that the image's behavior may depend on its dimensions relative to the containing div.

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