Images should be used on webpages to enhance the user experience by providing visual representations to content on the web page. We have several classes to allow for different control and layout positions of images on a web page.
The Img-full and Img-responsive classes both provide a way to force an image to stretch full width in a container with a big difference in behavior. Img-full will force the image to fill 100% of the container space regardless of the pixel size of the image. Img-responsive will only make an image stretch 100% of its actual pixel width, preventing the image from stretching any further than its true pixel dimension. Both classes make the image responsive with the container as the screen size gets smaller, and the image will hold its aspect ratio.
In this example we have an image that has dimensions of 300px wide by 300px high. The container is actually 500px and by using the .Img-full class it forces the image to fill that entire width 100%.
See the Pen Image Full by Wilmington University (@WilmU01) on CodePen.
In this example we have an image that has dimensions of 300px wide by 300px high. The container is actually 500px and by using the .Img-responsive class it won't allow the image to stretch width anymore then its true max dimensions of 300px.
See the Pen Image Responsive by Wilmington University (@WilmU01) on CodePen.
Using the class .Img-cover the image will fill the entire space available (width and height) while maintaining the it's aspect ratio. When using .Img-contain the image will fill the container while maintaining it's aspect ratio, but it will stop filling within the container once it hits an edge.
The image will fill the entire container, width and height, while maintaining it's aspect ratio. In order for the cover property to work correctly, the parent container has to be set to fill the entire space with width and height. If an issue occurs where the .Img-cover doesn't appear to make the image fill the entire container, then the most likely cause is the parent container. You can wrap the image in a div with the class .Img-parent. This class creates a div with width and height set to 100% so it fills the section space it is in, which will allow the cover property to work correctly.
See the Pen Img-cover by Wilmington University (@WilmU01) on CodePen.
The image will fill the container until it hits one of the edges of the container, and then it will stop. It will hold it's aspect ratio. In the example we used the same image as the cover example above to clearly demonstrate how the image will fill the container differently. It will fill until it hits an edge then stop, while still maintaining it's aspect ratio. Whereas, cover would filled both height and width fully in the container while maintaing the aspect ratio.
See the Pen Img-contain by Wilmington University (@WilmU01) on CodePen.
When using class .Img-left the image will float left allowing text to wrap around it. The class uses the float property to achieve this effect. However, this class will not work properly if the parent container uses Grid or Flex, it has to use the block property which div tags use by default. There is built in padding around the image so the text and image will have space between them. You can apply the .Img-responsive class or any other defined width to the image as well.
When using class .Img-right the image will float right allowing text to wrap around it. The class uses the float property to achieve this effect. However, this class will not work properly if the parent container uses Grid or Flex, it has to use the block property which div tags use by default. There is built in padding around the image so the text and image will have space between them. You can apply the .Img-responsive class or any other defined width to the image as well.
See the Pen Image Right by Wilmington University (@WilmU01) on CodePen.
There are several classes that can be used to set the width of an image instead of stretching full screen.
.Img-quarter = 25% of container.Img-half = 50% of container.Img-150 = max width 150px.Img-200 = max width 200px.Img-250 = max width 250px.Img-300 = max width 300px.Img-350 = max width 350pxSee the Pen Image Width by Wilmington University (@WilmU01) on CodePen.