The featured image isn't shown with its container width and height. This is how I display the featured image:
<div id="featuredimage"><?php the_post_thumbnail();?></div>
This is the CSS for featuredimage
#featuredimage {
height:200px;
background-color:#000;
margin-left: -40px;
margin-right: -40px;
margin-top: -20px;
}
.featuredimage img {
height:200px;
width:600px;
}
This is the code in PHP Functions
<?php
add_theme_support( 'post-thumbnails' );
?>
What's wrong? You can see the final result here. As you may notice, the featured image adopts any size but the one I want it to be.
Did you try using the ID instead of a class, e.g.
#featuredimage img {
height:200px;
width:600px;
}
However, you are repeating the use of the ID i.e.
<div id="featuredimage">
is used multiple times on your page. ID's should be unique (see http://www.w3.org/TR/WCAG20-TECHS/H93.html) therefore consider changing it from an ID to a class;
.featuredimage {
height:200px;
background-color:#000;
margin-left: -40px;
margin-right: -40px;
margin-top: -20px;
}
.featuredimage img {
height:200px;
width:600px;
}
<div class="featuredimage">...</div>
In your live page, you're setting the width and height on an image in the HTML and then trying to make it the background-image in your CSS. Rather than doing that, just have the image contain itself in the parent div
. Your CSS becomes:
.featuredimage /* Use a class here so you can use it more than once */
height:200px;
background-color:#000;
margin-left: -40px;
margin-right: -40px;
margin-top: -20px;
}
.featuredimage img {
height:auto;
width:100%;
}
Make sure to remove the background-size
declarations because they're unnecessary with this method (line 140 in your source).
You can also get feature image with
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img src="<?=$feat_image?>" height="100" width="100">
If the_featured_image()
spits out <img width=...
then you could replace it with something that isn't going to mess up the aspect ratio:
<div style="background-image:url(http://MY_IMAGE_URL.png);
width: 100%; height: 100%;"
class="attachment-post-thumbnail wp-post-image"></div>