Responsive images can be big on wide screens and automatically adapt to smaller screens such as iPad. Making your images responsive is not difficult to do: Here is a simple recipe to achieve it on your blog.
The first thing to do is to create the shortcode. To do so, open your functions.php file and paste the following code in it:
function responsive_images($atts, $content = null) { return '<div class="image-resized">' . $content .'</div>'; } add_shortcode('responsive', 'responsive_images');
Once done, open your style.css file and add those CSS rules:
@media only screen and (max-width:767px) { .image-resized img { width:100%; height:auto; } }
You can now use the [responsive] shortcode to insert responsive images in your blog:
[responsive]<img src="https://web.archive.org/web/20180630/CodeRevolution.com/image_url" alt="alt" title="title" />[/responsive]
Thanks to Rockable Themes for the tip!