Material Design for Wordpress allows you to embed media elements on your website. Embedded media elements are fully responsive so they fit in all users' screen size.
Images
Images are defined with the [img] shortcode. Tip: The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). If a browser cannot find an image, it will display the value of the alt attribute.
Image in comparison with figure class has one small, hance important difference - image does not contain caption, while figure is always with the caption.
[img alt="Alternate text"]https://mdbootstrap.com/wp-content/uploads/2016/06/widgets1-min.jpg[/img]
Embed Media
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
<!-- 16:9 aspect ratio -->
[media dimension="16by9"]https://www.youtube.com/embed/8SbUC-UaAxE[/media]
<!-- 4:3 aspect ratio -->
[media dimension="4by3"]https://www.youtube.com/embed/8SbUC-UaAxE[/media]
NOTE!
It is recommended to paste the copied code into the "Text" area, otherwise, the shortcode may not work properly. If you copy the code into "Visual" area, it may contain additional operators, which might break the media.
Image size
Remember when I mentioned in the Post lesson, that you can change the size of the image in the post? In the Settings/Media, you can specify the particular size which will be assign to the Thumbnail, Medium and Large size of the image.
Additionally, you may choose whether your thumbnail will be cropped to exact size or left proportional. Medium and Large size are by default proportional, therefore you just set the maximal width and height of the photo. In a result, your photos sizes depend strongly on the original size of the image.
Original
