akiryk
Member
Posted 7 months ago #
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 5 months 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 3 months 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.
pieter
Member
Posted 3 months ago #
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 3 months 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 3 months 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 3 months 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 3 months 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 3 months 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.
