Adjust web image widths (fix #51)

pressbooks · Feb 16, 2018 · 9be0cdb · 9be0cdb
1 parent 97abc6a
commit 9be0cdb
Showing 1 changed file with 21 additions and 45 deletions.
diff --git a/styles/components/media/_images.scss b/styles/components/media/_images.scss
@@ -200,60 +200,36 @@
  .chapter,
  .back-matter {
  img {
- display: inline-block;
  height: auto;
  max-width: 100%;
- padding: 0;
- margin: 0;
  }
 
- // Wrapper for captioned and uncaptioned images
+ .alignleft {
+ display: inline;
+ float: left;
+ max-width: 50%;
+ margin-right: $image-alignleft-margin-right;
+ }
+
+ .alignright {
+ display: inline;
+ float: right;
+ max-width: 50%;
+ margin-left: $image-alignright-margin-left;
+ }
+
+ .aligncenter {
+ clear: both;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
  .wp-caption,
  .wp-nocaption {
- height: auto;
- max-width: 100%;
  margin-top: $image-wrapper-margin-top;
  margin-bottom: $image-wrapper-margin-bottom;
  text-align: center;
-
- // Align (None)
- &.alignnone {
- padding-left: 0;
- margin-right: 0;
- margin-left: 0;
- }
-
- // Align (Center)
- &.aligncenter {
- width: auto;
- margin-right: auto;
- margin-left: auto;
- text-align: center;
-
- img {
- width: auto;
- margin-right: auto;
- margin-left: auto;
- }
- }
-
- // Align (Left) – max-width is 50%
- &.alignleft {
- float: left;
- max-width: 50%;
- padding-left: 0;
- margin-right: $image-alignleft-margin-right;
- margin-left: 0;
- }
-
- // Align (Right) – max-width is 50%
- &.alignright {
- float: right;
- max-width: 50%;
- padding-right: 0;
- margin-right: 0;
- margin-left: $image-alignright-margin-left;
- }
  }
 
  .wp-caption-text {