What I am trying to do is have a container with a fixed height of 95% and a width of 100%. Then inside that div is an image with a variable height/width.
How would I go about keeping the container have a constant height/width but allow the image (changes with jQuery) to be any size smaller than the container and centered.
This is my current CSS that I have been playing around with but I havnt had any luck yet:
.gallery-image {
text-align:center;
line-height:0px;
min-height: 95%;
max-height: 95%;
width: 100%;
}
.gallery-image img {
max-height:65%;
max-width:95%;
}
Any ideas? Thanks.
Smaller than the container is relatively easy, you would just need to set the max-width and max-height styles --
max-width,
max-height
Centering is a little trickier; it will definitely involve some JavaScript. You will need to know the dimensions of the images (so if they haven't loaded you'll need to wait for them before you can read the dimensions), but assuming their dimensions are known here's an example method:
function centerImage(image,elem){ //elem is the parent container
var ratioDiff = (image.width() / image.height()) - (elem.width() / elem.height());
if(!isNaN(ratioDiff)){
if(ratioDiff > 0){
//center vertically - full width
image.css({width:elem.width()+'px',position:'relative'});
image.css({top:((elem.height() - image.height())/2)+'px'});
}else{
//center horizontally - full height
image.css({height:elem.height()+'px',position:'relative'});
image.css({left:((elem.width() - image.width())/2)+'px'});
}
}
}
This works by finding the ratio of height to width and scaling the image accordingly (setting left/top positioning where needed). It will basically always fill the image to the parent size and centered within the parent.
EDIT: I should mention this uses jQuery. You can accomplish it without (would just need to re-write the style setting and getting functions)... but why would you?
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;
}
Setting max-width style value for images inside carousel breaks width of the container. This happens even though max-width value would not affect actual width of the images. I cannot figure out why this happens.
I created a JSFiddle about this because I'm unable to explain this issue otherwise: https://jsfiddle.net/atmp9ymr/1/
So I'm basically asking why this happens? Is there a way to fix this? Any help would be appreciated.
--
Edit. I try to explain the issue here:
So I have images inline within a container. Container forces items to be inline by using white-space: nowrap and images have inline-block and display style. This container does have position set to absolute if that matters. Everything is fine currently. Container which holds images has correct width (according to images inside). Now if I set max-width: 100% for images, container width is broken. Even if image size does not change, width is not anymore correct. I cannot find a logic for that.
Please check the jsfiddle for better explanation.
Max-Width of the images relates to the containing element.
So max-width: 100% on the image means "use 100% of ".item". .item is not further restricted and by using position:absolute on #inner, you have set this element to 100% (of viewport).
Try adding "border: 1px solid red" to #inner and #container to see, where the elements are drawn.
As long as there is not speciefied what has to happen, wenn sizes exeed the container, this will happen.
Firefox, Opera and Chrome have a workaround for this.
#inner {
position: absolute;
top: 0;
display: flex; /* add display flex */
}
.item {
display: block;
vertical-align: top;
width: -moz-max-content; /* this will stretch the items to maximum width */
width: -webkit-max-content; /* this will stretch the items to maximum width */
width: max-content; /* for future */
}
Have a look at this jsfiddle.
The challenge here is the mixing of percentage widths with inferred (auto) widths, and combining this with absolute positioning.
max-width:100% means the browser has to translate a percentage value into something absolute. This may yield unexpected results if ancestors have width:auto (which by the way is the default), and are absolutely positioned.
In such cases, percentage values make little sense, and 100% might just as well be interpreted as 100% of the element itself – not 100% of the parent/ancestor.
If you want to use percentage values here, you should make sure that the ancestors' widths are clearly set (to something other than auto). However, this might prevent the #inner wrapper from dynamically adjusting its width to wrap all its .item children.
In the end, the easy/ugly solution may be the best: Set the max-width to an absolute value. (For example the pixel width of #container.)
PS: I created a variation of your case. Maybe you'll find it useful.
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 want to make my image fit into a div without using any javascript and without letting the image stretch. I am unable to use the background-image property as I am using css transitions. Using
max-height:100%;
max-width:100%;
Works and is exactly what I want to do except for the scenario when the image is too small. I have considered enlarging the image to a certain height while maintaining the width and then applying max-height and max-width but this seems like a very hacky, time expensive solution if it even works at all. Are there any other suggestions?
Thanks
Kabeer
Display the image as block and it will fit to the parent container
wrap the image in a container and set this style for the image in it:
img {
display: block;
max-width: 100%;
max-height: 100%;
}
so it won't strech
here you have a fiddle
This fiddle is with smaller image than the container
You can try the following way which the image will inherit the height and width of its parent div
<div class="img-frame">
<img src="http://placekitten.com/g/200/300"/>
</div>
CSS
.img-frame{
width: 500px;
height: 500px;
overflow: hidden;
}
a img{
width : 100%;
height: auto;
}
Working Fiddle
Ok, it seems that there is no better solution so I will have to use the hacky solution I eluded to in the original question. For future people this is how I did it. lets say the container is 400px. Apply this css to the image:
height:400px; //set it to whatever the container height is
width:auto;
max-width:100%;
max-height:100%;
With this solution it will scale the image to the size of the container. It will then check the newly scaled image and set the max height to 100% which will stay at 400px. It will then set the max width to 100% which for a portrait image will do nothing if the image is landscape it will then set the width to the width of the container and it works. Also to centre the image after use:
margin:auto;
I apologise for answering my own question but I thought it would be useful for future people
I have been having a heck of a time getting a background image to stretch on the screen to fit the screen so I have no decided to just add it as an image. Below is a image of what I am trying to accomplish. I have cleared all of my CSS and HTML for that section and looking to start from scratch again. Thanks so much for the help.
www.jobspark.ca
your parent container already fixed width by 960px. and if you change your container width it will affect your whole design. better try my below code. make position absolute your image and you can stretch
.image-block-outer-wrapper{
height:338px;
}
.image-block-wrapper{
position:absolute:
//align this div using margin
}
.image-block-wrapper img{
width:1200px;
//or increase original image width by photoshop and set width here whatever you want
}
If you wish to have the image stretched across the width of the page and are happy to have the image height scale proportionally try -
.image-block-wrapper {
width:100%;
display:block;
}
.image-block-wrapper img {
width:100%;
height:auto;
}
Please ensure that the "image-block-wrapper" element is not nested inside any other element which has a fixed width. Additionally the tag should not have width and height attributes specified.