From d66aba1b20be2db1ec0f3222664b64dae3995801 Mon Sep 17 00:00:00 2001 From: Tracy Rotton Date: Sun, 14 Mar 2021 20:49:55 -0400 Subject: [PATCH] When images have width and height attributes in them, as is often the case with a CMS, if you set the max-width property in CSS to max-width: 100% but omit the height property altogether, the image could be distorted if the max-width value is invoked. --- dist/reset.css | 1 + dist/reset.min.css | 2 +- src/reset.css | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/dist/reset.css b/dist/reset.css index f3d489c..f09c7a3 100644 --- a/dist/reset.css +++ b/dist/reset.css @@ -47,6 +47,7 @@ img, picture { max-width: 100%; display: block; + height: auto; } /* Inherit fonts for inputs and buttons */ diff --git a/dist/reset.min.css b/dist/reset.min.css index de3be44..71b8181 100644 --- a/dist/reset.min.css +++ b/dist/reset.min.css @@ -1 +1 @@ -*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}} +*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block;height:auto}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}} diff --git a/src/reset.css b/src/reset.css index f3d489c..f09c7a3 100644 --- a/src/reset.css +++ b/src/reset.css @@ -47,6 +47,7 @@ img, picture { max-width: 100%; display: block; + height: auto; } /* Inherit fonts for inputs and buttons */