imax is a div element.
#imax {
width:222px;
height:222px;
}
#imax img {
width:222px;
height:auto;
}
if either way I tried auto on width or height, the images with different orientation will result in distort in either scale. How could I fix to display with ratio-aspect?
Leave out the height:
#imax img {
width:222px;
}
And the browser will take care of the aspect ratio calculation.
The image is distorted since you put restrictions on it's parent. If you specify just one of the size attributes, the other should scale according to proportions - unless it's limited/affected by its container. Might work differently if you used max-height/width on the container
Cannot be done with CSS only.
You could use Javascript to do this: Get either height or width of the full size image, then calculate the correct smaller size.
Related
Here is my project (1000px x 1230px). I want this element taken from my project (this header picture originally has 1500px x 354px) to:
1. be inserted with background-image property
2. that background-image to be direct child of body tag and
3. so that height and width would scale proportionally along with scaling the browser window.
If it was possible to carry out the above operation the paramerers would be width:100% hight:19.19% but when I enter hight:19.19% the image does not show at all, QUESTION: WHY IS THAT SO? I inserted background-image into section tag and this is how it seems to somehow work (but I do not know why it works):
section.super {
position:relative;
padding-top:11.8%;
padding-bottom:11.8%;
background: url(header.jpg);
background-size:100% 100%;
margin: 3% auto 0;
}
If I insert a div or article inside the given section tag above and specify width and height with % for background-image inside this div or article, the height WOULD WORK. But as a direct child of body tag the height does not work, why is that?
I know that there is an alternative IMG TAG but it will not work in rensponsive layouts where in different page sizes I will want substitute different .jpg (for instance) files (with higher and lower size) in which case I would need to paste different images to the same element in mobile styles, in tablet styles and deskop styles.
Although I am not sure i completely understand your problem, have you tried to use:
background-size:cover;
instead of:
background-size:100% 100%;
?
on your file css you should put:
body {
background-image: url("http://s12.postimg.org/ymlx2m65n/header.jpg");
}
I'm using jQuery Lazyload Plugin. Before the images are loaded I use a dummy image as placeholder which is a 20x20 pixels blank PNG. Also I'm using jQuery wookMark which is a dynamic grid plugin. For this plugin to work I need the images to be in their correct aspect ratio so the plugin can calculate the suitable position of each grid element in the page.
I have width and height attributes on img tag set to the correct dimensions, but that doesn't have any effect on the dummy image and it will be shown as a square, no matter what.
I can use inline styles to set width and height for each image, but this approach will stop the image from being responsive in other dimensions.
Is there a way to give an image width and height in a way that it act like it is its real dimensions?
Here's the pen to look at:
http://codepen.io/anon/pen/iaIoJ
The only way you're going to get what you want is by using some javascript. You're already using jQuery so that will make it a bit easier.
Use the following CSS to begin with (as an example):
.myImage {
width: 300px;
height: 400px;
}
then when the images are loaded (in some sort of callback function I presume):
$('.myImage').css('width','100%');
$('.myImage').css('height','auto');
Alternatively, you can work with a placeHolder css class that has this height and widht, and then $('myImage').removeClass('placeHolder'); to clear it from the images.
I found a good way for it.It's not going to be pure css, but that's fine by me :)
My solution is to set the image height to 0 and use padding-bottom to maintain the aspect ratio:
<img src="./blank.png" style="height:0;padding-bottom:133.333%">
And also having a class for the img tag when the actual image is loaded:
img.loaded {
height:auto !important;
padding-bottom:0 !important;
}
Here's the pen for this example: http://codepen.io/nOji/pen/yoshA
Hope you find it useful.
I am loading images in multiple places where the site theme will have them displayed in different sizes. I experimented with the CSS properties and found that I could scale the image using the height and width parameters and crop the image using position:relative and overflow:hidden.
What I want to do though is a combination of that. To scale the image down until the width is the width of the container element or the height is the height of the container element (which ever comes first). Then crop the rest.
Thus the image should be in proportion and also fill the container, regardless of shape.
Any ideas?
Marvellous
I'm not entirely certain what you're trying to do, but here is some guidance that will help you use only CSS properties to achieve some image resizing and clipping.
The code below will resize an image to whatever the container is.
<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%;"/>
</div>
the key is understanding that height and width properties of the img can use %. Using % in your design is great for giving flexibility. This will of course, force the image to whatever size the parent container is. So if the parent container is not the right aspect ratio it will deform the image.
To preserve aspect ratio you will need to know the dimension to expand along in advance and only specify that in the img tag style. For instance, the below will properly resize the image along the width only.
<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%;"/>
</div>
Using the above, if YOUR_PIC.jpg is 200x200 pixels, it will scale it down to 100px and clip 100px off of the bottom.
If you want it to expand within ranges along with the width/height you would use 'max-width'/'min-width'and 'max-height'/'min-height' css properties on the img. Set those equal to what you need. Then you will have something like this:
<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%; max-width:50px; max-height:50px;"/>
</div>
The above will make sure that the image doesn't expand for containers larger than 50px but will shrink for any container below 50px.
Alternatively, you can use some javascript to do some calculation of sizes dynamically. This would be useful if you do not know in advance which dimension you want to resize upon. Use javascript to calc the size and then set the above css properties accordingly. I would suggest using jquery to make your javascript life easier.
Hope this gets you on the right track.
To reword your question more succinctly; you want to scale an image to fill it's container element. This can't be done at the moment only using CSS3, but Christian Varga has achieved it beautifully using jQuery:
https://christianvarga.com/jquery-resize-image-to-parent-container-plugin/
You can use javascript and css. Javascript to check the image heights/widths, then apply appropriate css.
Javascript (note: using zeptojs which is pretty similar to jQuery):
$(window).bind("load", function() {
$.each($("img"), function(index, item) {
var image = new Image();
image.src = item.src;
if (image.height > image.width) {
$(item).addClass("resize-x");
} else {
$(item).addClass("resize-y");
}
});
})
CSS:
.resize-x {width: 64px; height : auto;}
.resize-y {width: auto; height : 64px;}
i have an dynamic image gallery to display, using PHP...
My PROB
the style & positioning should be that if there is not enough space for a whole div, like in the image above, then the DIVs in the row should position them like the following
centered and equi distant...
here is JS-Fiddle basic template set, if somebody wants to try something on jsFiddle
If you wanted to achieve this with just CSS, the code would be as so:
#div {
clear:both;
width:500px
}
.img {
display:block;
width:150px;
height: 50px;
float:left;
}
As far as I remember, that's it..
Good luck!
Never "clear" the float (at least until the end of the grid).
Enclose each img in its own DIV with the float:left style,
Important: Give each of those DIVs the same HEIGHT (slightly larger than the largest photo), otherwise if the images are different heights you will get some weird floating.
Optional: If your images are different widths, and you want a nice 'grid pattern', then you can give all the DIVs a width property.
Beware of the effects of margins on overall height/width.
Also note that if you use the standard meta viewport tag on your pages to format them for narrow mobile screens, this will shove all your images into columns to fit that screen without shrinking them unbearably (provided something else doesn't make the page wide).
#div {
width: 220px;
height: 215px;
float: left;
}
you can achieve all of that simply with css width property for div
#div {
width:500px;
}
We implemented almost the same here
http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158
here also , you can switch between grid view and normal view , all we are playing around is with divs width
http://www.allposters.com/-st/Animal-Posters_c622_.htm
Google had the same problem with their image search... they had to overcome it with fancy scripting. Looking at the source, each row of images is a <ul> inside a <span>, and each image is in an <li>. Then when you resize the window, the images get moved from one <ul> to another. That's the best method they could come up with, apparently.
So, using jQuery:
blocksPerRow = Math.floor($('#container').width() / blockWidth);
$('.row ul').each(function () {
while ($(this).children('li').size() > blocksPerRow)
($(this).children('li:last-child').prependTo($(this).nearest('.row').next()));
while ($(this).children('li').size() < blocksPerRow)
($(this).nearest('.row').next().find('li:first-child').prependTo($(this).nearest('.row')));
});
I think that should do it. Add that to $(window).resize() as well as the document ready event.
I'm trying to, of course, build something in HTML.
However, I am running into some serious issues with positioning!
I'm trying to get elements in the website to be centered, but I cannot do that without sacrificing (somehow) controls such as z-index, and width on those elements -- In some cases, vice versa.
Theoretically, I should be able to make something be centered, set it's width, AND set it's Z index all at once.
Can anyone help?
To center something, set it's margins to auto. To set an objects width, set it's width, to set an object's z-index, set it's position to relative to maintain it's centreness, and set it's z-index accordingly.
div {
width:40%;
position:relative;
z-index:5;
margin:auto;
background-color: red;
}
Example: http://jsfiddle.net/wDzkd/