I have a DIV that is 100% width..... inside a grid system .. the total grid is 1140px..
anyway inside the div that is 100% i inserted a image...
problem is if the div background is black... there is like 1cm at the bottom that still shows the black color.
like this
http://jsfiddle.net/hb3QK/3/
<div style="background:black; width:100%;">
<img src="http://i42.tinypic.com/ofq9tg.png" >
should i be using a float on the image? or using a display:block?
here you do
http://jsfiddle.net/cancerian73/hb3QK/4/
img {
height: auto; /* Make sure images are scaled correctly. */
width: 100%; /* Adhere to container width. */
display:block;
}
add display: block; to style of image.
or you can add if you need to keep it inline.
line-height: 0;
to the image style.
Related
I want to make image inside this div container not to affect its container size when stretching, I'd like it to go outside up and bottom if that's possible without setting container height or by assigning negative top or bottom with position.
.container {
display: flex;
background: skyblue;
height: 300px;
margin-top:50px;
}
img {
position:relative;
width: 500px;
top:-30px;
}
.column1 {
flex: 1;
}
.column2 {
flex: 1;
}
<div class="container">
<div class="column1">Hello world</div>
<div class="column2">
<img src="https://food.fnr.sndimg.com/content/dam/images/food/fullset/2013/6/28/0/FNK_Apple-Pie_s4x3.jpg.rend.hgtvcom.826.620.suffix/1382545039107.jpeg" alt="">
</div>
</div>
So basically what i want is for image to not affect container size, when stretching image size of the div to stays the same while it can go outside but without setting height for the div like this.
EDIT: I want to make image not affect it's div size ( that i can do with the height ) but i also want it to overlay not only from the bottom but also from the top of the div ( like it is now but without using negative top position in the css )
You can always set position: absolute; on the image to bring it outside of the document flow which will have the effect you desire.
If you are not using flexbox another option will be to set float which will bring the image outside of the document flow as well.
A third option will be to set height to column2 to make it not care about children heights. But that's kind of a hack and I can't confirm it will work on all possible browsers.
.column2 {
height: 1px;
}
Also please keep in mind that by doing this the image will start to overlap elements that are below your container div.
There is a very nice and cool way to make a background image work like an img element so it adjust its height automatically. You need to know the image width and height ratio. Set the height of the container to 0 and set the padding-top as percentage based upon the image ratio.
It will look like the following:
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100 % ;
height: 0;
padding-top: 66.64 % ; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
so I'm messing around with jsfiddle..
http://jsfiddle.net/3mfnckuv/3/
For those of you who play Destiny, this is Destiny inspired haha..
but anyway, a few questions :)
1) Why is there the white space underneath the image?
2) I'm trying to put the image and description side by side. I wrapped the image in a div, then used inline block, rather than float. Is this a good approach?
3) How can I move the description div, higher and align it with the top edge of the picture?
4) I removed whitespace caused by inline-bock using margin-left: -4px. Is this a good approach?
5) Is it a good practice to set width and height to 100% on the body and html?
<ul class="test-2">
<li>
<div class="image"><img src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"></div>
<p>Invective</p>
</li>
</ul>
html, body {
width: 100%;
height: 100%;
}
.test-2 li {
list-style-type: none;
}
.image, p {
display: inline-block;
border: 1px solid black;
}
Thanks guys
1) Why is there the white space underneath the image?
The default vertical-align of your image is baseline by default. Change it to top, bottom, or middle to get rid of the white space.
2) I'm trying to put the image and description side by side. I wrapped the image in a div, then used inline block, rather than float. Is this a good approach?
Sure. White space in your HTML between the image and the text will be rendered as white space on your page when using display: inline or display: inline-block. With float: left, the white space is collapsed.
3) How can I move the description div, higher and align it with the top edge of the picture?
Set the vertical-align: top on the element containing the text.
4) I removed whitespace caused by inline-bock using margin-left: -4px. Is this a good approach?
No. That white space is an actual space character. Collapse it using float: left or remove it from your html.
5) Is it a good practice to set width and height to 100% on the body and html?
Maybe. Won't hurt. This was a trick that helped columns fill the page. Today we can just set min-height: 100vh instead. The vh and vw units, representing view height and view width, respectively, are very handy.
Here I think I fixed your problems. Try this out. You needed to make your image class in the img tag. Also I put your p tag inside the same div as the image.
Here is CSS
body {
width: 100%;
height: 100%;
}
.test-2 li {
list-style-type: none;
}
p {
position: absolute;
top: -1px;
left: 110px;
}
.image {
display: inline-block;
border: 1px solid black;
}
Here is the div in HTML
<div><img class="image" src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"><p>Invective</p></div>
Also when using css you don't have to put html for the body just body will do fine.
When I set the background image at I have to give it a static size of div otherwise it will not display the background images. What is problem.....
I have this CSS:
.wrapper {
width: 1170px;
margin: 0 auto;
height: auto !important;
}
.main_div {
float: left;
width: 100%;
height: auto !important;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
width: 100%;
height: auto !important;
}
.header {
width: 100%;
background-image:url(file:///D|/HJ/ALL%20HTML%20TEMP/bootstrap/bootstrap/img/header_bg.jpg);
float:left;
}
The first comment is correct, I decided to create a little demo to explain this.
So if you take a look at the demo you can see we have the first div using background to place an image. This is fine and valid CSS but without a height and width how can the background be displayed?
Moving onto the second div, here we give the div with the background and height/width. Now the background has appeared. Because we have defined the height and width the background has room to display. A background cannot tell the element to be a certain size without you defining it.
And the last div, this has <img> inside of it. As this is an block element it has a height and width, so it will show the image as the parent has no height or width and therefore will allow the image to expand inside of it.
HTML:
With no height:
<div class="image"></div>With height:
<div class="imageWH"></div>With img:
<div class="imageIMG">
<img src="http://placehold.it/350x150" alt="" />
</div>
CSS:
.image {
background: url(http://placehold.it/350x150) no-repeat;
}
.imageWH {
background: url(http://placehold.it/350x150) no-repeat;
width: 350px;
height: 150px;
}
.imageIMG {
<!-- No need for anything -->
}
DEMO HERE
Why do you float the .main_div with width:100%? Floated elements get out of the flow which means they don't stretch their parent elements, so a background set on .main_div's parent won't show.
You should either remove the float or add some clearing technique to the header (also known as a css clearfix). See demonstration here: http://jsfiddle.net/YLEgY/1/
I've been trying to horizontally center a wide <img> element inside a <div> which is not as wide as the image itself. And the <div> has overflow: hidden set on it.
For instance, the image is 500px wide and the DIV is 250px wide. Is there any clean way (such that it works for images of any dimension) to center the image such that only the center portion shows up inside the div.
<div class="Container">
<img class="Thumb">
</div>
And :
.Container {
position: /* anything but static */
width: 250px;
}
.Thumb {
position: relative;
width: 500px;
margin: 0 auto;
}
you can add your image as a background using css and give background position to center center.
Since you're expecting a responsive behavior, I would suggest to have (for a simple one)
div {
text-align: center;
}
But using CSS3 and media queries it is possible.
Check this out How to Create a Responsive Centered Image in CSS3
Quick demo
I want a <img> whose width is 40% of the page, and it gets stretched.
How can I resize it without stretching?
For example, if I have a image whose file originally looks like this:
____8888________
____8888________
____8888________
In my webpage, normally, it should looks like:
____8888________
____8888________
____8888________
As soon as I make the browser a little more narrow, the max-width(let's say 10 characters in this example) would take effect.
When that happens, I would like it to be:
____8888__
____8888__
____8888__
(just like it's been cut from the right side. Of course from both sides are better),
Rather than:
__888_____
__888_____
__888_____
Any trick (putting it into a <div>'s background) is okay.
Width and height are unknown.
Thank you all for your previous answers, but, sorry, I think I haven't put enough emphasis on "After limiting its width to 40% of the page", which means before width-limiting it should looks normal.
The trick is to put the image into a containing block element, eg a DIV. Once inside set the width of the image to 100%, this will instruct the browser to fit the image width flush with the left and right edges of the DIV.
You then control the width of the DIV via CSS, I find keeping the image in a block element makes manipulation much easier when creating fluid layouts.
Example:
img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>
If you wan the image to be clipped/cropped in any way, set it to be larger than it's parent, and set the parent's overflow css to hidden.
Example:
img.clipped {
width: 150%; /*Scales image to 150% width of parent container*/
float: left; /*Floats image to left of container - clipping right hand side*/
float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
overflow: hidden;
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>
Hope this helps...
Add this class to the img html tag, it will keep the image as it is, but will take the necessary specified space ie.40% x 40% without stretching the image
.img{
width:40%;
height:40%; //change to whatever your choice
/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/
object-fit:scale-down;
}
Here's a few options. (see the demo of all these options here: http://jsfiddle.net/Squeegy/Gcrdu/ )
The first as a plain image of unknown size. This displays at whatever size it happens to be.
<img src="http://www.google.com/logos/classicplus.png">
But as it turns out, you can preserve the aspect ratio of an image if you only set the width, or only the height. The other dimension will adjust itself to keep things from stretching.
// HTML
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink">
// CSS
img.aspectshrink {
width: 100px;
}
But when you use CSS background images you can do some creative cropping based on where anchor the background.
This says "Go"
// HTML
<div class="cropped-right"></div>
// CSS
.cropped-right {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: left center;
background-repeat: no-repeat;
border: 1px solid red;
}
And this says "gle":
// HTML
<div class="cropped-left"></div>
// CSS
.cropped-left {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: right center;
background-repeat: no-repeat;
border: 1px solid red;
};
Try to use ImageResizer.
Here's the link : http://imageresizing.net/
Do you mean cropping the image? If so look into CSS overflow property. Also you could put it into the background and centre it in the div