Created
October 1, 2017 21:03
-
-
Save benji1304/53e3a5ca8dd26f2d010df94be5ef2688 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container { | |
| width: 50%; | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .container img { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Note: The example above scales the width of an image (or video) to the width of a container. If the image is larger than the container, the vertical portion of the image will overflow and will not display. To swap this behavior, you can set max-height to 100% and width to auto (essentially swapping the values). This will scale the height of the image with the height of the container instead. If the image is larger than the container, the horizontal portion of the image will overflow and not display.