This question already has answers here:
How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?
(19 answers)
Closed 6 years ago.
I have an div
which I keep box shaped all the time using:
div{
float:left;
width: 447px;
height: 445px;
background-color: blue;
}
div:after{
content: "";
display: block;
padding-bottom:100%
}
the problem occurs when I want to add an image to the div
<div><img src="as.jpg"></div>
using:
img{
width:100%;
height:100%;
}
Does one of the two things:
the image does not cover whole div
the image does not cover whole div and box shape is ruined
Is there a way how to fix this? Demo
Use the image as background-image.
Example :
div {
display: block;
width: 500px;
height:500px;
background: url('http://www.nasa.gov/sites/default/files/images/729223main_728322main_messenger_orbit_image20130218_2_full_full_full.jpg') no-repeat;
background-size: contain;
}
<div>
</div>
If you would like to use bootstrap framework, its simpler.
Example (using Bootstrap):
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-3">
<img src="http://images.all-free-download.com/images/wallpapers_large/love_wallpaper_vector_3d_wallpaper_261.jpg" class="img-responsive" style="padding-top: 5px">
</div>
</div>
You may also do it the usual way, just set the height of the image.
Image in a div, with image height defined :
<div>
<img src="http://images.all-free-download.com/images/wallpapers_large/love_wallpaper_vector_3d_wallpaper_261.jpg" alt="image" height="200px" />
</div>
That is happening because the parent element, hence the div.small hasn't its height explicitly set.
For elements height is auto by default, meaning every element has height equal its contents. Contents of an element determine its height.
For an element to have height: 100%, hence to use percentage to fit in container's height, you should determine the height of the parent in absolute value.
Try this:
Try set for example height:400px; to div.small and height: 100%; for the image. Then the image will fit its container.
Check the fiddle here.
Update
Also, please check this tutorial by lynda.com, as it provides an explanation about elements height. A bit old, but very good stuff.
Related
img{
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
}
The full code can be seen here: http://jsfiddle.net/ZSSVt/
I want the image to "auto-fit" inside its div container, like here: http://jsfiddle.net/y4Y3S/ (but vertically aligned).
Right now the kitten gets squished when the image is resized. How to fix that?
updated jsFiddle
Try wrapping the image in another div. <img> elements behave differently than <div> elements when width and height are applied.
For example width: 100% applied to <img> means that the image element will have the same width as the source picture. If you apply width: 100% to <div>, it would have the same width as the first parent with defined width.
Thus, your desired html will be:
<div class='box'>
<div class='wrapper'>
<img src="http://placekitten.com/g/200/300" />
</div>
</div>
With corresponding css for wrapper div:
div.wrapper {max-height:100%;}
I'm working with divs and I managed to make the wrapper center by having this css:
.wrapper{
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
width:1100px;
height:100%;
}
then I have this inside that is floated left. It went inside but my problem is when it gets longer, it pass the wrapper div. The wrapper div should also adjust when the height of the div inside adjust but it's not working. When I also float the wrapper, it also adjusts but it doesn't go to the center anymore.
.inside_div{
float:left;
margin:5px;
width:400px;
height:100%;
}
What I tried to do is to float the wrapper div and use:
margin-left:200px;
to adjust it and to make it look that it's in the center. But I based it on my laptop's screen. It may not be centered on different screens with different sizes.
What I wanted to see is that the wrapper div will be centered in all screens and it will also adjust when the div inside adjusts too. I just don't know how to do it.I tried dfferent ways but still same result.
This is the html part:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="logo">
</div>
<div class="menu">
</div>
</div>
<div class="wrapper">
<div class="inside_div">
</div>
<div class="inside_div2">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
The inside_div2 is floated right.
Floated objects won't expand their parents. Your initial css height value is all that the parent container has to reference for its height. By the way, height:100% is generally not going to work for you and is rarely something you should include.
Without seeing exactly what you're trying to do, this would probably work fine. Although it depends a bit what you have inside the 'inside_div':
.wrapper {
margin: 0 auto;
width: 1100px;
text-align: left;
}
.inside_div {
display: inline-block;
margin: 5px;
width: 400px;
}
I assume you wanted it off to the left since you were floating it left. But if you just want it centered, you can either just remove your float value and use margin: 0 auto; or use the css above and change text-align to center.
EDIT: Ok, so had to recheck your stuff above. I think what you want is simply this:
.wrapper {
width: 1100px;
margin: 0 auto;
}
.inside_div {
width: 400px;
margin: 0 auto;
}
That'll center both of them, regardless of the size of the screen. You can add a height value to the inside_div if you need, but px values would be best, and if you have content in there is usually best just to let the content dictate the height without explicitly setting it.
Remove all height properties and add a "clearfix" class to your wrapper.
In your css, define ".clearfix" as :
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
That should do the trick for modern browsers. You should definitely Google "clearfix" to learn more about it.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Vertically Center HTML Element Within a Div of Dynamic Height
I am currently designing a website for which i need to vertically center some content. The design is pretty basic: a fixed height header (left-aligned and always at the top of the page), and underneath that vertically centered images in a horizontal row (yes, horizontal scrolling, i know).
Ideally i would want the vertical centering of the images to be based on the 100% height of the viewport - the header (so a dynamic height that prevents the content from overlapping the header).
An example of the website can be found on http://bit.ly/vl1XNY, which is currently using tables for layout. The css and html i used can be found there too (of course).
I am aware of various solutions for centering content vertically within a container of fixed height, however none of them have worked for me because i'm using variable height and do not want to use absolute positioning (to prevent overlap). I have looked around and tried the table-cell solution, the line-height one, and the absolute positioning one.
So far the only solution that has worked exactly as i intended was using tables. But i would like to refrain from using them. Is anyone aware of a valid css and html solution for this problem? Or at least a more graceful solution?
Wohh, talk about timing, i was looking for such a solution just a few minutes ago and stumbled upon an article on this subject exactly, you can read it all about it here: Centering in the Unknown.
You can easily modify your code to make it work like so:
CSS
#wrapper {
background: none repeat scroll 0 0 blue;
height: 100%;
text-align: center;
}
#wrapper:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.center {
display: inline-block;
padding: 10px 15px;
vertical-align: middle;
width: 460px;
}
HTML
<div id="wrapper">
<div class="center">
<img src="images/a_1.jpg" alt=" ">
</div>
<div class="center">
<img src="images/a_2.jpg" alt=" ">
</div>
</div>
You can try the following code:
<div style="display:table-cell;">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
Please check the above code in the context of all HTML:
<style type="text/css">
html, body {height:100%;}
body {
margin:0; padding:0;
}
#header {
height:1.7em;
}
#content {
display:table-cell; vertical-align:middle; height:500px;
}
</style>
<div id="header"></div>
<div id="content">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
This will only work with a fixed height table-cell, which can be achieved by calculating current viewport height with javascript
I'm just trying to put a div next to the other. I've found 2 different ways. You have them here below. But I don't know what of them is more correct..
<html>
<head>
<style type="text/css">
.jander1{
width: 100px;
height: 100px;
float: left;
border: 5px solid;
}
</style>
</head>
<body>
<div class="jander1">jander1</div>
<div class="jander1">jander1</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.jander1{
width: 100px;
height: 100px;
float: left;
border: 5px solid;
}
.jander2{
width: 100px;
height: 100px;
margin-left:100px;
border: 5px solid;
}
</style>
</head>
<body>
<div id="container">
<div class="jander1">jander1</div>
<div class="jander2">jander2</div>
</body>
</html>
Javi
Floating both is simpler, and means that you don't have to be careful if you add more elements next to the first two. Floating just one is more unusual, more often used when you want actual float effects (like text wrapping around the floated element).
As krs1 said, you'll probably want to use some method to clear your floats. The easiest way is to have a containing element (as in your second example), and to apply either overflow: hidden or overflow: auto to it. This can have side effects (if content from the boxes overflows), but does not complicate your markup.
#container { overflow: hidden; }
#container div { width: 100px; height: 100px; float: left; }
First of all, think about your content. The markup of your content should reflect your content; don't let CSS determine the class attributes you use. The nature of that content also affects what CSS you should be using.
Case 1: Different content in the 2 <div> elements
If we're talking about different content between the two <div> elements, such as an image and some text...
<div class="profile-picture"><img src="http://www.gravatar.com/avatar/0be84773790974af8d6a1d5d55801736?s=128&d=identicon&r=PG" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!</div>
... use different classes. The neither is a jander so don't include jargon class attributes to accomodate your CSS. Class attributes are element identifiers and should make semantic sense.
Case 1.1: The Left <div> has a fixed width
Once you get to your CSS, in a case like this one, the image has a fixed width which probably isn't subject to a lot of change; as such you can use technique #2 from your question to give the second <div> a margin-left:
.profile-picture {
width:80px;
height:80px;
float:left;
}
.about-me {
margin-left:81px;
}
Here is a JsFiddle example.
Case 1.2: The Left <div> has a variable width
But what if we need that image to some times be bigger, sometimes be small? What if we don't have knowledge of the image's size when we're writing our CSS?
<div class="profile-picture"><img src="http://media03.linkedin.com/mpr/mpr/shrink_80_80/p/1/000/09a/108/11e3bdd.jpg" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!<br />blah<br />blah<br />blah<br />blah<br />blah</div>
<div class="profile-picture"><img src="http://www.gravatar.com/avatar/0be84773790974af8d6a1d5d55801736?s=128&d=identicon&r=PG" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!<br />blah<br />blah<br />blah<br />blah<br />blah</div>
... one of those images is 128px tall and the other is 80px tall.
We can then float the first <div> while simply targeting the other with anoverflow-x:hidden;`:
.profile-picture {
float:left;
}
.about-me {
overflow-x:hidden;
}
Here is another JsFiddle example.
Case 2: Similar content in the 2 <div> elements
Then by all means give them the same class attributes!
<div>
<div class="column">Here is content for column 1!</div>
<div class="column">Here is content for column 2!</div>
</div>
If they are supposed to behave identically, target them with the same rules and float them both to the left. If they don't behave identically, you can generalize the considerations above; do you know how wide that first <div> should be? If so, go ahead and use the margin-left. Otherwise use overflow-x.
If they work, they work. Option 1 looks good, I've run similar patterns before.
However you're going to run into issues if you attempt to put a block element beneath floating elements. After the second 'jander' class element add this:
<div style="clear:both"></div>
Since both div share styling, I would go with the first example. I would also add a clear:both to your #container since it is wrapping the two divs which are floating left.
Since you have a margin-left in your 2nd div only, I would either use a pseudo-class like #container div:first-child or an id/class to add the margin.
So if the parent div's height is 100% then you can set the child to 100% and it will work.
But if the parent's height is decided by content then the height attribute doesn't seem to work.
Is there a decent workaround that would work on most browsers?
<html>
<head>
<style>
#content img
{
display: block;
}
#left
{
float: left;
}
#right
{
float: left;
width: 200px;
border: thin solid;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
<img src="images/dc_logo.png"/>
<img src="images/dc_logo.png"/>
<img src="images/dc_logo.png"/>
</div>
<div id="right">
stretch full height plz
</div>
</div>
</body>
</html>
No, there isn't, and it's a shame. There are little tricks to emulate the effect, but those are situational. For example, if you have a sidebar and a main content area, you can surround them in a container, and give the container a background the repeats vertically to look like it's the sidebar. Or you can use JavaScript to dynamically calculate the size onload. But unfortunately, purely CSS-wise you're stuck.