to add more,
The featured image if of larger size, is squished.
In case of images which are within the articles, they are coming out of the frame.
Hey tarunbatta !
try adding the following to your style.css
img {
width:100%
}
and let me know about the result 🙂
Cheers !
Since the author is using bootstrap, I was doing the following in a custom js,
$(“.featured_image img”).addClass(“img-responsive imageCentering”);
$(“.entry-content img”).addClass(“img-responsive imageCentering”);
$(“.entry-content iframe”).wrap(“<div class=’embed-responsive embed-responsive-16by9′></div>”);
$(“.entry-content video”).wrap(“<div class=’embed-responsive embed-responsive-16by9′></div>”);
But, I liked your CSS option much better, so added the following changes to the styles,
.entry-content img {
width: 100%;
height: 100%;
}
.entry-content iframe {
width: 100%;
height: 100%;
}
.featured_image img {
width: 100%;
height: 100%;
}
Thanks.
I would add the css in next update.
Thanks,
Qaiser
This solution has a problem;
ALL images now span 100% of the width of the text column. I would like to keep the images responsive to prevent them from being larger than the text column, but I do not wish for smaller images to be stretched.
Can anyone help?
you just need to add below css at the end of style.css file
.single .featured_image {
text-align: center;
}
.featured_image img{
height: auto !important;
max-width:100%;
}
Or simply wait for next update which I am going to release this week.
