Responsive Images
The default display option for images is their own width, hieght which usually breaks the responsive layout.
options include:-
- img-fluid : (css width: 100%;and height: auto;) sized to parent element min width of parent element will not expand the image larger than its original size
- using w-* to resize image within parent
- use clearfix if image is too large for parent container
orginal no resizeing
Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus
with img-fluid
Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus
with img-fluid w-75
Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus
with img-fluid h-75
Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus
Using clearfix ro prevent image overflow
image overflow
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui temporibus aliquid dignissimos dolor aut at, libero est obcaecati...
Using clearfix to prevent image overflow
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui temporibus aliquid dignissimos dolor aut at, libero est obcaecati...