Problem: when I say max-width:100% in my css, images adjust by width but not height -- they just squish narrower.
I'm trying to make a responsive web design, meaning fluid grids and images that resize to the width of their container. Ethan Marcotte's book (Responsive Web Design) talks about using
img {
max-width:100%;
}
It works for him here: http://unstoppablerobotninja.com/demos/resize/ but not for me. I'm guessing this is because wordpress gives me an image with width and height attributes included in the img tag. Is there a way around this? Any other ideas?
nataliemac
Member
Posted 1 year ago #
The answer probably lies in the CSS for the TwentyEleven theme, which is responsive:
/* Images */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
max-width: 97.5%;
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}
Looks to me like images with an explicit width and height declared on them require a resetting of the width and/or height to 'auto' in order to take advantage of responsive resizing.
Good luck!
teolopez
Member
Posted 1 year ago #
^ you just saved me a whole lot of sleepless nights lol thanks for pointing that out. However I was looking over it and is there a way to make the thumbnail images for posts fluid? reason I ask is because I copy pasted the code you provided into my theme and it worked for the rest of the images in a post or page but the thumbnail I was not able to do so. Any help is greatly appreciated!!
Thanks in advance.
For me this is working:
<?php if(has_post_thumbnail()) { $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'thumbname' ); echo '<img src="' . $image_src[0] . '" width="100%" />'; } ?>
I put it in my template-file. With 'thumbname' is the name of the thumbnail defined in functions.php
nataliemac
Member
Posted 1 year ago #
@teolopez - I'd imagine that all you have to do is update those CSS selectors so that your thumbnail is being selected too.
thanushka
Member
Posted 1 year ago #
The reason for weird vertical scaling (when we make them scalable in CSS), is because of the width and height in <img> tags. WordPress automatically adds a width and height to all it's <img> tags.
Even though we make the images scalable in CSS, with img{max-width: 100%;} We have to completely remove both width and height values from all images <img> for them to scale proportionately.
If it's an image in a post or a static page/ template page, all you have to do is, add the above CSS to the style.css file, and then remove the 'width' and 'height' properties from the <img> tag.
If it's a dynamic image such as a slideshow or post thumbnail we can use a function to remove the width and height. Here's a link to a tutorial
This is the page/demo which I have put the above function to work..
nataliemac
Member
Posted 1 year ago #
@thanushka - Have you had a look through the twentyeleven theme? The images still have width and height attributes, but the CSS I copied out of twentyelevent's style.css and shared above enables the images to behave responsively even with the width and height attributes.
thanushka
Member
Posted 1 year ago #
@nataliemac The setting the height to auto doesn't work for images such as post thumbnails of a custom post type. The link I posted (it's an article I wrote after facing and finding a solution for this same issue), show how to make all images responsive.
nataliemac
Member
Posted 1 year ago #
@thanushka That's so weird! I wonder why it works in one place and not another. I'll have to investigate and see what's going on.
casabsolute
Member
Posted 1 year ago #
I'm currently checking out this purely CSS solution (with media queries) to making all images in WordPress resize responsively : http://jeffsebring.com/responsive-wordpress-images/ - so far, so good for me.
iamspacehead
Member
Posted 1 year ago #
The problem with a pure css approach is that the images can have large file sizes, which can impact website performance significantly on a mobile device.
I've created a small theme plugin that allows your theme to detect whether it is on a mobile device and load a scaled down version of the image.
Check it out!
http://www.spaceheadconcepts.com/blog/wordpress/responsive-images-responsage/
coolgates
Member
Posted 10 months ago #
What about making images with captions responsive? Big barrier to this seems to be that the width of the caption div is declared inline as a pixel value.
http://core.trac.wordpress.org/ticket/14380
Anybody have any great ideas? I did find some code that removes the inline style, but then what? Using a percentage (of the post width) to set the caption div width works better, but how would you accomodate different image sizes (e.g. thumbnail vs. large).
Thoughts?
dmoutal
Member
Posted 10 months ago #
Not sure if this applies to all themes or not but this is the css I used to get images with captions (and the captions themselves to resize properly
.wp-caption,
.wp-caption-text {
max-width: 97.5%;
height: auto;
width: auto9; /* ie8 */
}
Hope others find this useful.
BTW I am using the headway theme (not free unfortunately) and the tabloid child theme.
Now I want to figure out how to resize embedded videos
