Hi! You’ll have to edit your theme’s style.css file and change the rule in lines 56-59. Right now, it is as follows:
img, video, object {
max-width: 100%;
height: auto!important;
}
You’ll have to change to this:
img {
max-width: 100%;
height: auto;
}
video, object {
max-width: 100%;
height: auto!important;
}
This will fix your issue!
Thanks for the quick response. It did fixed the issue in the computer browser, but the issue remains in mobile browser.
This is what my page looks like in mobile:
http://i.imgbox.com/n7X0X6wZ.png
This is what it should look like:
http://i.imgbox.com/iSw8e2gH.png
Hi again. The problem is the same. Your theme a pretty similar rule inside CSS media queries. For instance, in a file called responsive.css you have the following rule:
@media screen and (max-width: 960px) {
...
img, embed {
max-width: 100%;
height: auto!important;
}
...
}
Note how the img tag has a height attribute that’s using the !important directive. External featured images have no height by default (they are not loaded via the src attribute of an img tag, but using an inline CSS background-image property).
Luckily, this is only a CSS-related problem, which means you can edit your CSS files or create new CSS rules to fix the image sizes.
I hope you can fix it!
Hi, I tried to change responsive.css and remove the “!important” in img height but still it looks the same. I have no idea how to fix this. Please help.
Thanks!
Btw, I noticed that the plugin is generating this img tag for the mobile page:
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ style=”background:url(‘http://i.imgbox.com/VOgGxLYA.jpg’) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;width:620px;height:315px;” class=”attachment-bigthumb wp-post-image nelioefi”>
But as seen in the code above, width and height are set to 620×315. And rendered image retained the height in mobile which is 344×315.
Hope this info would help solve this problem. Thanks again.
Hi again. Yes, you’re right. Our plugin always follows the same approach: featured images are added using the CSS background property. This way, you can set any size to the img tag (with any aspect ratio) and the featured image won’t be stretched; it’ll be cropped.
By default, WordPress generates thumbnails of the featured images you upload to your Media Library. This thumbnails are usually smaller than the original image, and they may even change the original aspect ratio (cropping it). Then, when one of this thumbnails is inserted to your page, it can be scaled using CSS. If the theme only scales its width, the height will be automatically scaled too in a way that the aspect ratio is preserved.
Unfortunately, this does not apply when using external featured images. You’ll have to check your CSS files and make sure that external featured images look good in all the places where they can be inserted. You’ll have to add new rules (using the .nelioefi CSS selector) to scale the featured images as needed.
I cannot further help you here. This is one of the limitations we’re bound to when using external images, and the only solution is to tweak CSS files.
As I said in my previous message, Nelio External Featured Images adds a featured image using the CSS background property. This way, it is possible to crop and scale it without stretching the featured image. Unfortunately, it relies on proper CSS images sizes; taking into account that some themes do not specifically define images sizes in their CSS files (they rely on the actual image size, which may have been cropped and scaled by the theme), it’s up to you (site owner) to create those rules.
