responsive-images

I have images of equal aspect ratios (300px x 255px) in divs taking up ~31% of the width to make 3 columns on desktop/tablet, then full width on mobile. The images scale to 100% within the div, with the height set as auto. I need to change them from img tags to background images http://codepen.io/anon/pen/yYagJd **HTML:** <div class="hotels"> <img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br> Here's a title </div> <div class="hotels"> <img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br> Here's a title </div> <div class="hotels"> <img src="http://www

Look at this: http://www.consultacultura.it/portale_comunale_della_cultura.asp?IDcomune=1 Carousel images are not responsive like images under of it. They have the same class img-fluid. This is a known issue in Bootstrap 4 Alpha 6... https://github.com/twbs/bootstrap/issues/21611 As a workaround you can use.. .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; } http://www.codeply.com/go/0QUU06MiIL ben Thijssen For me that workaround did not work for both, desktops and mobiles. I adjusted the proposed workaround a bit to make it -orientation- sensible. @media

I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I've realised that I'd like to use media queries to serve different images based on different resolutions - let's say a small, medium and a large version of the same image, for example. I know

An image in a flexbox that has a max-height style appears to render differently depending on whether it has its height and width attributes set. The one with the attributes, set to the true width/height of the image, renders with its aspect ratio preserved, but the ones without the attributes respects the max-height and appear squashed. .flex-parent { display: flex; max-height: 10vh; } <div class="flex-parent"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> <img width="320" height="240" src="https://upload