I have an image element, I need it to fit inside a specific div (let's call it div 1). The image has a wrapper div that needs to fit to the image (let's call it div 2).
It almost works using the following methods:
setting the image and div 2 to float: left;
or
setting image to display: block, and div 2 to display: inline-block.
Both work great when the page is first loaded, but div 1 is actually a fluid width/height div that resizes with the browser, and when you reduce the height of the browser the width of div 2 doesn't adjust (illustrated by the green border)
Here are sample pages:
http://sabrinagelbart.com/fit-img-and-outer-div-to-container.html
(left:-50%, left:50% are for centering, don't make a difference with the bug)
http://sabrinagelbart.com/fit-img-and-outer-div-to-container-inline-block.html
Try background-size: cover; and top: 0;, bottom: 0;
or try position: fixed;
Related
I have a javascript function which resizes images, dynamically generated on a page via php, to ensure that they fill the width and height of the div that contains them. Unfortunately, I have no control over the width to height ratio of the image, and some images could not be stretched to cover the height of the div without appearing distorted.
My solution to this is to attempt to add a margin-top css parameter using javascript, assigning the remainder of the distance between the bottom of the image and the height of the div to be the value of that parameter (e.g. maxHeight-imageHeight). However, using this method the image disappears beyond the bounds of the div.
I was wondering if anyone had any solutions to this. Either a better way to do it, or a way to make this method work?
If you want fill your div by image without distort you must fill it by width or height of image which on closer to the div size.
.imageInDiv{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
And if you want your image to be in center of it's parent div:
.parentDiv{
display:flex;
display: -webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
}
I'm trying to fill a whole div with an image, regardless of the size of the image, but for some reason the image is only as big as it's default size. It does not automatically stretch to fit the size of the div. I tried setting the width and height of the image to 100%, thinking that it'll fit the div that way, but the image still stayed in its default size. Is there a way to automatically stretch an image to fill a div, without testing and changing each image by hand?
<style>
div {
border: 1px solid red;
width: 1000px;
height: 1000px;
background-image: url("side.jpg");
background-repeat: no-repeat;
}
img {
width: 100%;
height: 100%;
}
</style>
<div> </div>
From your question, it is unclear whether you are trying to use a background image or an img element to fill the div.
If you want to fill the div using an img element, the code you've posted will already do that for you. You just need to place an img element within the div, such as:
<div><img src="http://placehold.it/250x250" /></div>
If you want to stretch the image to fill the div using it as a background image, you simply need to add the value cover to the background-size property:
background-size:cover;
JSFiddle for img element
JSFiddle for background image
The <img> tag is an html element that has nothing to do with the background image of that <div>.
As APAD1 correctly points out, the proper way to force a background image to fill an html element is to use background-size.
background-size: contain fills the element until the background image touches the first edge of its container (maintaining the aspect ratio).
background-size: cover fills the element entirely while maintaining the aspect ratio of the image.
background-size: 100% 100% fills the element entirely so that the background image touches the edge of the element on all sides (thus potentially distorting the image).
I have a dynamic-height container (its height is specified in relative measurements), inside of it, two elements - a header, and an img, e.g.:
<div class="item">
<header><h1>Title</h1></header>
<img ... />
</div>
I want the image to show in its entirety. Its css is set with height:100% .
Because of the height that the header takes, the image is clipped a little bit below (it is has an hidden overflown edge), where I want its height to auto adjust (become smaller) to fit inside the container.
There is a solution, where I use calc(100%-[height of header]) for the height of the image, but since calc is not supported in all browsers I was wondering if there is a different more supported solution for this.
Here is a jsfiddle:
http://jsfiddle.net/7xLo7mr6/
(Apply the class fix to the container to apply the calc fix)
Perhaps CSS flex could be your solution for this one:
http://jsfiddle.net/7xLo7mr6/9/
Using flex-direction: column; and applying a max-width to the container (allowing the image to fill in the rest of the height after the header text while not stretching the width) could potentially solve your issue, but might cause you more troubles depending on what you're ultimately after.
Another option: http://jsfiddle.net/7xLo7mr6/11/
apply height: 7%; to the header and height: 93%; to the image
Make the clipping happen at the top of the image instead of the bottom:
http://jsfiddle.net/7xLo7mr6/13/
Apply position: absolute; to the header, give it a background: white; and width: 100%;, then apply a position: relative; to the container so that the header applies a width 100% to the container and not the body.
If you just want the image to shrink when its container shrinks, you can give it a max-width of 100%, and that will stop your image from growing so large it exceeds its container.
.item img {
height: 100%;
max-width: 100%;
}
It might be important to note that declaring height: 100% does not make elements 100% of the height of their containers, it makes them 100% of their own intrinsic height. The heights of elements are determined by their content, not the other way around. Read a full explanation here: https://stackoverflow.com/a/5658062/4504641.
http://jsfiddle.net/ingridly/337wrgj8/1/
I'm trying to build a horizontal scrolling image gallery, which has a fixed height (e.g. 200px) and a bunch of images (aspect ratio mantained, shrunk to fit 200px height) placed side-by-side in the gallery. If the images exceed the browser width, a horizontal scrollbar for the gallery is provided.
I'm having a problem with getting it to work on Firefox. In Firefox, the div that contains the image will act as if its child image wasn't shrunk, and thus leave lots of white space between images. The gallery works as expected in Chrome and Safari.
I've made a jsfiddle to try and replicate the problem in as little lines as possible - observe it in Firefox vs. another browser.
.container {
height: 200px; /* Want a fixed height for container. */
white-space: nowrap; /* Want elements to display side-by-side, for horizontal scrolling. */
overflow: auto; /* Want scrollbars on .container. */
}
.container > .element {
display: inline-block;
height: 100%;
}
.element > img {
height: 100%;
}
Am I doing something wrong? Is there any way to get .element to shrink to fit its scaled-down image content?
Note that aside from the image, I'd like a text overlay over the image (not reflected in jsfiddle), which is why I've chosen to enclose the image in a .element div (so that I can give it position: relative and then add an absolutely positioned child overlay to it), and chosen to give it a display of inline-block (so that I can align the child overlay to the bottom of .element).
You're seeing https://bugzilla.mozilla.org/show_bug.cgi?id=829958
The good news is that this is fixed in Firefox 25. The bad news is Firefox 25 is not shipping until October 28.
As a workaround for now, giving .container > .element a fixed height instead of a percentage height would work... Or alternately give .container a parent that has the overflow style. The key part to work around that bug is to have the fixed height on something that has visible overflow.
i will try to explain this better than in title.
I have a big div with width = $(window).width()
Now i will have an undetermined number of div with images as backgrounds.
I want it all are positioning from left to right into the big div. Due to big div will have differents sizes (screen resolution) but divs with images will have same size always (all 300x200)...i want for example, if only 4 divs with images fit in the first line, the fifth image div goes to the second line.
Where to start?
Simply define your width for the div elements inside your container, and float them left. For example:
div.container > div {
width: 300px;
height: 200px;
float: left;
}
Here's a jsFiddle demo (resize the results pane to see it in action).