I have images uploads and when the images and displayed as thumbnails then sometimes they are too large and overlap the area.
How can I change my code so that the image will not overlap the area? It seems to happen for images that are tall. One possibility would be to adjust the size of the thumbnail but I'm reluctant to do that and I wonder if there is some other solution. The html is available here and the css is available here. I created a fiddle with the problem. I'm thinking of either using the answer here or reducing the image size like this.
url = images.get_serving_url(str(image.primary_image.key()),
size=110)
It may be beneficial to have these as your styles:
max-width: <width>;
max-height: <height>;
width: auto;
height: auto;
This will keep the image at the correct aspect ratio and maximise either the width or height or both so that the image does not exceed the width and height set on the max-width and max-height parameters.
Related
Suppose I have an image sized originally 1280x720(ratio ~ 1.78), but for some reason I added the image as 1000x720(ratio ~ 1.39). The code should look like below
<img src="example.JPG" style="height:720px; width:1000px;">
(Edit : And the code above can't be changed. Actually in the first question I said 'I added', but actually the html source is from WYSIWYG editor. Also, the author(user, as it is WYSIWYG editor) wants to add up the image size 1000x720 or proportional to it(ratio ~ 1.39) even though it can make ugly image)
And, to resize the image proportionally when the screen width is smaller than 1000px, I set the max-width as 100%, and height as auto using css:
img {
height: auto;
max-width: 100%;
}
Then, the 'auto' option for height is ignored, and image isn't resized proportionally. If I override 'auto' option for height using keyword 'important', then the image is resized, but as ratio 1.78(proportional to 1280x720), not 1.39(proportional to 1000x720, and it's what I want to do).
Is there any solution for this using pure css? (AND without calculating ratio by hand, as the given example is only for 1000x720 but I can't expect what size would I get from the user in real service. Maybe they can insert image size as 500x720 even though its real size is 1280x720.)
I've got an image whose height is set as 100%. This makes the image display correctly as I would expect so long as there's plenty of width. However, when the screen's width is reduced eventually the image loses it's ratio because the width is squished while the height still remains 100%. I would like to have the image always stretch to the maximum size possible within the container without losing it's ratio. In other words, it the width is the limiting factor, the image should use 100% width and maintain ratio, but if the height is the limiting factor, than the image should use 100% height while maintaining its ratio, and it should be able to switch between these. Is there a way to do this purely in CSS? Thanks!
This should keep the correct ratio (providing you don’t need the height to be set to 100% for some reason).
img{
width: 100%;
height: auto;
}
--EDIT--
If you want to retain a consistent height of the parent element then you can either:
Hide the overflowing image using overflow: hidden;. Although this
means you will lose some of the image at larger sizes. See
example.
Use max-width and max-height to stop the image growing at a
certain point. This means you will potentially be left with some
white space in the design. See example.
I am using simple css code for Profile Image Styling, but Image is stretched. How can i fix it?
Take a look at the Profile Images in this Picture:
Right Now I am Using this Code:
.Comment_Image_Size {
height: 32px;
width: 28px;
}
I also used this Code but in this case some Images are Bigger and some are smaller in height:
.Comment_Image_Size {
width: 28px;
}
Don't fix the image dimensions, I think the project you are working on should be dynamic, if it's yes, than you can also resize the images via server side, if you don't want to do that, and want to stick with HTML and CSS, than use a wrapping element, say div, float it to the left, assign some fix height & width and assign a class, and than use the below snippet to
div.class_name img {
max-width: 100%;
max-height: 100%;
}
This way, your image will resize proportionally and it won't be stretched anymore
Demo (I've attached both examples, you can check out in the demo)
In the above demo, the first one is which I've suggested to you, other is one which you are probably doing, which is stretched, so go for max-height and max-width properties.
best solutoin to give max-width and max-height to your class
.Comment_Image_Size {
max-width:28px;
max-height:32px;
}
The issue is that the original images are not the same aspect ratio. You need to specify the right height and width for each image to ensure that the maximum width/height is not exceeded (one will be less if not the right aspect ratio).
You may need to resize the images upon upload to have thumbnails that are the right size while preserving the aspect ratio How to resize images proportionally / keeping the aspect ratio?
Currently pictures are being placed into my website within a div container with a given width and height.
Some pictures are landscape, others are portrait.
Currently I give the images a static width and height using CSS to position it correctly inside it's container.
.winner .winner-image img {
height: 159px;
width: 143px;
}
However more often than note this distorts the picture.
What's the recommended way to display images without distorting them? Best practices?
Without some server side code to actually determine the height and width of the image, the best idea would be to set EITHER the height OR the width, but not both. This will cause the image to be resized proportionally. Which dimension you choose to constrain would depend on your site layout.
To not distort them, the images must be given their native height and width (or a proportional value). Just assign one of the values, and most modern browsers will scale the image proportionally for you.
You can add an external element (span or div) with a fixed size, and have that element not display overflowed content.
To guarantee that your images are re-dimensioned, you can also set a height OR width value for images, matching the wrapping div value (only one value must be assigned, so that images are not distorted.
<style>
.img-wrapper {display:inline-block; height:159px; overflow:hidden; width:153px;}
.img-wrapper img {height:159px;}
</style>
<div class="img-wrapper">
<img src="">
</div>
The best way is to create thumbnail of your image once uploaded to a server. Thumbnail should be 159x143 px, but if you need to show images now you can set for div fixed width with css property "overflow: hidden;" and just set height of your image. do not touch width
If it's important that all images show in the same size, and you don't want to distort them, you have to crop them for the best result. Otherwise, you could wrap the image in a div, set the height and width of the div and hide the overflow, or use the image as the background for the div.
If height and width may be different across images, then go with the solutions already mentioned, i.e. setting either height or width.
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 :)