![\"Example](\"https:\/\/commons.wikimedia.org\/wiki\/File:LARGE_elevation.jpg\")
<\/p>\n
One way to prevent a larger image from going beyond the boundaries of its parent element is to give a standard width to all images. However, if the actual width of an image is smaller than the given width, the image will be stretched:<\/p>\n
<\/p>\n
This post shows the CSS rule-sets that you can use for flexibly keeping images within their parent element. <\/p>\n
Example CSS rule-sets and HTML codes that keep an image within its parent element<\/h2>\n
When an image is smaller that the parent element, we want the browser to show the image in its actual dimensions instead of stretching to fill the parent element.<\/p>\n
On the other hand, if an image is too large for the parent element, we want the browser to show the image in a dimension that nicely fit the parent element.<\/p>\n
With this purpose in mind, we can use the In order to see the effect of the When rendered by a browser, the above codes will look like the following:<\/p>\n You can try to resize your browser to see if the image is always displayed within the parent element. <\/p>\n In addition, you can try to change the image to one with a smaller width than the parent element. In this situation, the image will be displayed in its actual dimensions.<\/p>\n\n Since an image is worth a thousand words, we use images in your webpage to express complex ideas succinctly.<\/p>\n By default, if we do not specify any dimensions for an image, most browsers will show the image according to its actual size. In this situation, an image will appear to spill over the boundaries of its parent element if it is bigger. <\/p>\nmax-width<\/code> CSS property to indicate the maximum size that an image can be displayed:<\/p>\n\nimg {\n max-width: 100%;\n}\n<\/pre>\nmax-width<\/code> CSS property on images, we can create an example for flexibly keeping an image within its parent element:<\/p>\n\n<html>\n <head>\n <title>Flexible CSS rule-sets to keep your images within their parent element<\/title>\n <style>\n img {\n max-width: 100%;\n }\n \t.container {\n \t\tbackground-color: #CCC;\n \t\tpadding: 2rem;\n \t\tmargin: auto;\n \t\twidth: 50%;\n \t}\n <\/style>\n <\/head>\n <body>\n <div class="container">\n \t<h1>Flexible CSS rule-sets to keep your images within their parent element<\/h1>\n \t<img src="https:\/\/sites.google.com\/site\/tcperpetual\/bigimage\/1280px-LARGE_elevation.jpg"\/>\n <\/div>\n <\/body>\n<\/html>\n<\/pre>\n<\/p>\n\n
Share\n <\/a>\n <\/li>\n Tweet\n <\/a>\n <\/li>\n Share\n <\/a>\n <\/li>\n Save\n <\/a>\n <\/li>\n <\/ul>\n ","protected":false},"excerpt":{"rendered":"