css - How to make thumbnail image 100% width inside a div (on WordPress), and not larger? -
(first off, let me not ask such basic-seeming question here if hadn't tried think of -- manipulating of involved variables.
the image loads in functions:
add_theme_support('post-thumbnails'); add_image_size('mobile-thumb', 800, 300);
that size (800,300) problem. when display on mobile, stubbornly stays 800 wide. need 100% width of screen.
i styled
div.thumbnail-box { width:100%; height: 100%; background-color: #eee; margin-bottom:10px; margin-top:0px; margin-left:0px; } .the_post_thumbnail { max-width:100%; } .desktop-featured-image { width:100%; }
i've tried inside , without div.
i've adjusted heights , widths.
my current html is:
<div class="thumbnail-box"> <img width="800" height="300" src="http://website/wp-content/uploads/2015/05/obama-e1424474715102-800x300.jpg" class="attachment-banner-image wp-post-image" alt="obama-e1424474715102" /> </div>
does know how display featured image @ 100% width of screen?
thank you
this:
img { max-width: 100%; height: auto; }
makes images scale page, if they're larger parent div/container/whatever. if want scale featured images, should work:
.wp-post-image { max-width: 100%; height: auto; }
Comments
Post a Comment