I want to display a collection of image thumbnails in a grid. The images will come in a variety of sizes, but I'd like to restrict the thumbnails to a particular size (let's say 200px wide and 150px tall).
What I'd like to find are some magical HTML markup and CSS rules that will
Allow the images to be included in normal <img> elements
Ensure that the thumbnails fit into their 200x150 pixel box, retain their proportions, and are centered in whichever dimension they overflow.
Not require JavaScript or specific knowledge of each image's actual dimensions
I'm not sure if this is possible. I can make a (bad) approximation of what I want with the following markup:
<div class="thumb">
<img src="360x450.jpeg">
</div>
and CSS:
.thumb {
width: 200px;
height: 150px;
overflow: hidden;
}
.thumb img {
min-width: 200px;
min-height: 150px;
width: 200px;
}
This attempt breaks in a variety of ways:
Images that are in portrait orientation will be sized correctly, but will overflow through the bottom of the container, resulting in vertically-off-center cropping.
Images that are wide and short will be distorted in the horizontal dimension because of the hard-coded width and min-height rules.
But without that hard-coded width, images that are larger than the minimum height and width will not be resized at all.
If it's at all helpful, I've put up an example that will (hopefully) illustrate what I'm trying to do, here:
http://overloaded.org/tmp/imgtest/
http://overloaded.org/tmp/imgtest/imgtest.zip
I know that I can solve this problem by omitting the <img> element altogether and instead pulling the thumbnails in as a centered background image on the containing element, but, if it's possible, I'd like to keep the <img> elements in the page.
Thanks for any help or pointers you can provide!
Edit: I suppose I should note that an ideal solution will work in IE 6+ and modern browsers, but any solution that works in IE 9+ and other modern browsers (recent WebKit, Gecko, etc.) will be gladly accepted.
You can (kind of) achieve this with the CSS3 background-size additions: contain and cover.
Live Demo
contain (top picture) fits the entire image, keeping aspect ratio. Nothing is cropped.
cover (bottom picture) fills the containing element either vertically or horizontally (depending on the image) and crops the rest.
Possible, probably.
Also, probably not the best idea. Your big issue to overcome here is orientation of thumbnails. What if you're dealing with a panorama? Certainly, shrinking it down is going to create a very unsightly "squished" image, as would a very tall image. It's rare that everyone deals in 4X3 or 16X9 100% of the time. So, you'll need a mechanism to pad out the image. Even if the ratio is correct, it's not going to resize as cleanly as you could with a program like Photoshop or Gimp.
The other major issue in this thought process is that you're going to be sending massive amounts of unnecessary data to the server via the larger images. It'll take longer to load, fill up the DOM unnecessarily, and overall just inhibit the UI experience.
There are a number of ways to get around this, none of them pure CSS. I've tackled this several times, each in a unique way based on the client. For one client that wanted things totally custom, it was a custom uploader, resizing via iMagick (part of image magic) and custom CSS/Javascript for the album with major interactivity. In another instance, I use Gallery as the backend--handling the thumbnail creation, uploading, titling, cropping, and organizing-- and then just pulled the reformatted image links out of the DB to display them in a more appealing manner. You could save yourself even more trouble and just use something like the Flickr api to pull images for your use.
Here's a tut on using ImageMagick to do thumbnails.
.thumb img {
max-width: 200px;
max-height: 150px;
min-width: 200px;
min-height: 150px;
}
Well I know for thumbs you would want it max and min if you want a smaller image to make it bigger and bigger image to make it smaller.
try to set max-width and height and not min because if the image is not exactly that size it will overflow :)
Related
I'm working on an image sharing website for one of my computer science classes, and I've been running into trouble when I try to actually display the images to the user. I've let users tag their images, and display images that match one or more tags. However, when I try to display images with different aspect ratios, it looks quite ugly. I want all of the images to have the same height, but allow their widths to change to keep the aspect ratio.
I can solve my problem easily enough if I put a fixed height for each row (e.g. .row { height: 30vh; }), but I've been running into issues when I try to have a dynamic height.
Potential soultions I've tried:
flex—flex makes the images overlay into each other, and since I don't know the size beforehand, I can't really use .img{ flex: NUMBER; }.
div— I wrapped the imgs in divs, and resized the img to fit. This is the most common answer I've found, except it doesn't work for the same reason as a plain img: I don't know the height beforehand, so I cant set the height of the div. I also tried this with span and that also didn't work.
table—I tried using a table, with a single tr tag, and every image written as <td><img src="..." ></td>, but this also doesn't work, and isn't exactly what I'm looking for; I don't want a table, as I just have a single column.
li—Each separate list element is on a new line, but I want as many to be on the same line as possible, and there's a bullet point. True, I could remove the bullet point and make the lines wrap, but it still doesn't solve the issue.
I could theoretically load all the images via JavaScript or PHP (depending on if I make it server- or client-side), find their width, and use that. However, that seems extremely hacky and I want a better solution.
Here is an example of what it's currently doing. And here is an example of what I want it to do, without forcing the height in the CSS.
I'd like to do this in just pure CSS + HTML if possible, but I'm not sure it's even possible using JavaScript.
Using width: auto will tell the browser to calculate the width based on proportions.
img {
width: auto;
height: 500px;
}
Here's a jsFiddle to show you. I hope this is what you mean.
Below is the code:
img {
max-width:100%;
height:auto;
}
I am using the responsive image technique, which is to set max-width to 100% to resize my images according to the screen resolution/size. However, when I put the image inside a div that has a percentage width, the images do not appear crisp (since I surmise, it has been resized via browser). The text on the image is quite blurred. Is there a way to make it look crisp? Or at least to make it look crisp on the most common screen size?
CSS:
img {
max-width: 100%;
height: auto;
}
.img-container {
width: 57%;
}
HTML:
<div class="img-container">
<img src="[img source]" width="700" height="500" />
</div>
If you've got a large image that's being scaled down, resize it in a vector graphics program first, then save it as the preferred size, and serve that to the client.
If you've got a small image that's being scaled up, you're going to lose resolution, no option.
This isn't really a CSS/HTML problem, just FYI, it's a scaling problem. Various browsers will use various scaling algorithms, so the results will not be consistent. You've got to grab the controls and force the browsers to show the image you want, without scaling. One of the practical drawbacks to the theoretical beauty of "responsive design".
Use SVG if you have non-photographic images
Use slimmage.js for photographs.
Manually exporting 14 image versions to support the 2013 range of resolutions is madness.
use SVG images or use a plugin called picturefill.
I recall it was long ago best practice to hardcode width and height for any image (generally so it allocated appropriate amount of space while loading), but now with most people on high speed and things generally more dynamic, what is the best practice for this? Is it still preferred that any content image have inline size set with html?
It doesn't matter if you set the size using HTML attributes or in a stylesheet, but you should still specify the size for images.
Eventhough images are loaded a lot faster nowadays, there is still a noticable delay between the page being displayed and the images pop up. It's still irritating when the layout of a page changes while the images are loading.
Yes, it is still preferred.
Plenty of people are not on high speed connections, and mobile is becoming more common.
It doesn't have to be inline - you can do it in external CSS. Some older browsers, if you don't specify the size, will just treat it as 0px;
Its always best to use CSS
You could hardcode the image height and width like this
.myimg img {
width: 10px;
height: 10px;
}
your image file itself should be the size you want it to display as, for the most part, if your concerned about slow loading especially! if you've got a 500X800 px image, that you only want to show as 100X200, scale it down! the file size will be much smaller so it will load faster :)
I would say yes if you want to make sure the white space is included in case of the image does not load or during document load. But no if you're scaling/resizing the image with those attributes, as its unnecessary load on the browser and causes image distortion.
If you are designing for cross browser compatibility, then you should at the very least specify the height and width in your CSS for the image itself. I have found inconsistency between FireFox, IE, Opera, etc if sizes are not specified specifically for the image. Due to the fact that each browser, not to mention different versions, handle adherence to HTML Standards differently. I have found that some browsers will do its best to extrapolate the HTML designers intent, while others just croak on the first error. I would also recommend em sizes, rather than pixel or %'s if you intend for the website to be viewed from a mobile device such as a tablet. I will say, however I have just started playing with HTML5 so I don't of the difference in HTML5 with respect to images.
I just answered a similar question on Wordpress Stack Exchange and also on Webmaster Stack. I am posting it here intending to clarify and help more people. (admins/moderators: if this isn't allowed, let me know the proper way to help).
doesn't really means you need to specify width and height in the html. What it means is that is you gotta reserve te proper space and when the image is loaded, the browser doens't have to reflow and repaint the page.
Besides, if you hardcode the dimensions, it kinds of defeats responsive behaviour. If your layout is not responsive, it's ok, but if you want to keep some responsiveness, you could use only CSS to achieve the results.
Most of time, using both width and max-width:100 will do the work, but this post from Smashing Magazine has an interesting technique: instead of using max-width:100%, you can use The Padding-Bottom Hack :
"With the technique, we define the height as a measure relative to the width. Padding and margin have such intrinsic properties, and we can use them to create aspect ratios for elements that do not have any content in them.
Because padding has this capability, we can set padding-bottom to be relative to the width of an element. If we also set height to be 0, we’ll get what we want. [...]
The next step is to place an image inside the container and make sure it fills up the container. To do this, we need to position the image absolutely inside the container, like so:"
.img-container {
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
background-color: black;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I am trying to create a completely fluid layout in CSS (everything in %), which would work seamlessly across platforms (desktop/mobile/tablets like iPad).
With Fluid Layouts, can an image be made completely fluid? For example:
img { max-width:100%; }
Does this mean it will adjust/fit to any extent or window size?
Also can this be applied to background images as well ?
Does this property have any limitations in terms of browser implementation or anything ?
The snippet you provide says that the maximum width for the image is 100%. This could mean no wider than the browser window or device viewport. It could also mean no wider than a relatively postitioned parent node. But, if the window is big enough, the image will render at it's native size.
It can't be applied to background images, because the background image itself is tiled or positioned based on it's original size. The max-width trick is mostly useful for content images, not so much layout or styling images.
It is limited, in that IE6 doesn't support it at all. However, that market is rather small and shrinking, so maybe you can ignore that issue.
Your code means the size of the image relative to it's parent's width. So lets say the div that the image is in is 500px wide, then the image may be a maximum of 500px wide, or smaller, not larger. for more info on max-width: W3.org max-width
For backgrounds this works a little different, you can use background-size: x y; for this. It's CSS3 and is not supported by older browsers. for more info on background-size: W3.org background-size
I'm working on a website with a em-based layout (so it can stretch and compress gracefully when users increase or decrease font size). This site has a header that should be displayed across all pages. I have a "header" div in all pages, and the site-wide css file includes the code:
#header
{
width: 50em;
height: 6em;
margin-bottom: .5em;
background: url("/IMAGES/header.png");
}
The problem is that this doesn't really stretch gracefully. When text size increase, the height and width change, but **the image doesn't increase in size; it simply repeats*.*
How can I make my image stretch and squish, instead of repeating or getting cut off? (I'd like a css-based solution if possible... I've got some html ideas in store, already).
There is no way to use css to strech a background image. You would have to use javascript or something similar. However, if you have an image that doesn't need to be repeated (e.g. blends into the background), you could do something like this:
background-position: center center;
background-repeat: no-repeat;
Addendum: The position has the following format: <top|center|bottom|xpos> <left|center|right|ypos>
where xpos and ypos can be given in the regular fashion (em, px, %, etc...).
The only way I've ever found is:
Set background of #header to bgcolor of header image.
Place new div inside #header
Split header image into 2
Set left half of new image as #header background aligned-left
Set right half of new image as #header.div background aligned-right
Of course that's only going to work with appropriate images though.
I'm pretty sure you can't change the scaling of background images. If your header.png file was included as an img tag, then you could set its height and width to be a number of ems and the browser would resize it (usually making it look like crap though).
Remember as well that pretty much all the modern browsers do page zooming these days, which will scale everything up without changing your layout too much. Perhaps tell your users to use that feature?
#Pianosaurus, I think your idea may be the simplest, although limited. Simply, don't stretch the image, but make sure it looks good when it's not stretched (center it, and don't let it repeat). Also, if you use a fair amount of padding at the edges of your header image, sizing the page down wouldn't cause such big problems, either.