I'm working on creating a fallback image inside of my class that creates responsive images, but I am stuck with trying to fix a problem for IE. Since I cannot use things like <source>, object-fit and srcset I am up against a challenge. The image is placed underneath the content so it will size to the height of the div content. The image should cover the whole background of the div that contains the content, but the problem is that the width presses the image to this compact size that looks awful:
I will provide you with a jsfiddle: https://jsfiddle.net/6Lxwesvf/7/ .
I made a copy of one of the wrappers it does exactly what it does inside of the IE. So I hope someone knows something about making the image not look all pressed by the width.
Change this
height: 100%;
to this:
min-height: 100%;
min-width: 100%;
margin: auto;
Working pen: https://codepen.io/sidhanshu28/pen/ERNwxz
Related
In my project all images inside a container have the css attributes max-width: 100%; and height: auto; to scale images down when the viewport shrinks and the container shrinks.
This is working, but the price to pay is that the browser is not able to draw the page correctrly without loading the images to get the dimensions.
When I embed the image via <img width=100 height=100 /> the browser normaly reserves the space and renders the rest of the page.
As soon as the above mentioned css is applied, the site content below the image “jumps” because the image is 0x0px during load progress.
This leads me to two questions:
Is there a way to use the max-with 100/height auto technique without destroying the normal placeholder behavior?
If not, what would be a correct class declaration to apply for some of the images that should not auto-resize and loaded normally, with correct sized placeholder during load? I tried height: initial and height: inherit, in both attempts the image is still 0x0px before loaded, the html height attribute is ignored.
I created a fiddle, but the loading problem cannot be seen here due to caching; Therefore, I copied the code from https://jsfiddle.net/yrx52avq/4/ to http://www.testserver01.de/fiddle.php and added delays and no-caching options.
Reload the page: The red boxes pop out during load progress. The green ones do not.
In your css, please try the below code using the property object-fit:cover or object-fit:contain. This property will resize your image to fit in the container.
.container img {
object-fit:cover;
max-width:100%;
}
or
.container img {
object-fit: contain;
max-width:100%;
}
you can find more information on object-fit property from the w3schools
Hi I'm trying to create a Responsive Email Template.
I can't make the background images responsive.
Here is a sample of the images code:
a#learn-more { background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; }
Basically We have the following images that I am having a hard time making fluid (responsive)
-logo (a#learn-more)
-banner image (.banner-img)
-learn more button (a#learn-more)
-image1 and image2
I have my demo here: http://jsfiddle.net/nLxjU/3/
Hope you can edit the code to see what my issue why I cant make them responsive.
I'm really stuck here.
You can use a different div with absolute positioning, and containing the image inside it with percentile width and height, so when the screen size changes, the div (and the image inside it) resizes, too. Just place the div below everything with z-index and you're done.
Email-clients, like Outlook (-Express), Mail (OSX) etc, all use different html-engines, and have a lot of restrictions. Especially Outlook seems to be using a limited IE6 based rendering engine. Background images and styling by css classes don't work, and forget about absolute or relative positioning.
Make sure the template also looks good in these email-clients, unless you only aim at mobile email clients (they seem to support all of this).
Take a look at the standards guide (html/css) at http://www.emailology.org/.
You can improve with the following, but as #Willem says you really need to change your approach if making an email template. Many email clients completely remove the head and strip out styles. Some support a limited set of inline styles for formatting and none for layout. In fact an old-school table layout with inline styles is generally the best way to go.
You might find some of this useful: http://www.campaignmonitor.com/guides/mobile/
As for making the best of what you've got so far:
Your .divider and .banner-img elements were set to 600px wide.
Set them as 100%.
Don't have the banner as a background image.
Size your .lpanel and .rpanel images as 100% of the parent's
width.
Demo: http://jsfiddle.net/nLxjU/
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?
I'm currently working on a website. I noticed some elements are beeing cut off, if viewed in Firefox. I attached an Image, showing the problem.
The image below is a jsfiddle Screenshot from Firefox.
The code reproducing it is located here: JSFIDDLE
It's just an image, with an percantage value set with CSS.
.image-percent {
width: 30%;
}
The weird thing is, sometimes I am able to reproduce the bug and sometimes it simply vanishes after adding random HTML-Elements or other CSS-Properties.
Anyone already experiences this behaviour or know a workaround, forcing Firefox to resize the image the right way?
Actually found the solution in this thread Firefox blurs an image when scaled through external CSS or inline style.
Firefox implemented non-standart css property image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Playing with different values this solution gives more or less appropriate result:
image-rendering:optimizeQuality;
http://jsfiddle.net/jGKkB/
You need to add the max-width property. this should fix it.
.image-percent {
width: 30%;
max-width: 100%;
}
Just for testing. try this:
.image-percent {
max-width: 100%;
height: auto;
width: auto;
}
Hope that's it.
Basically, your image resolution is very high and you are trying to display it in 30% width.
So your image's pixels is not showing properly. Whenever you show the large image to small or small image to large this will be happened.
You can create an another image with desired 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 :)