0

I have a lot of elements (bootstrap html) that behave responsive on a website. This means that they do not have a fixed width or height.

In each element an image should be displayed.

I tried to work with height or width100% values. Also min-height or min-width I have tried. I also tried it with a div and its background-image.

I also found this similar posts on Stackoverflow:

Unfortunately, the first post based on fixed height and width. The second post is very helpful, but I search for a solution without using JavaScript (if this task is not solvable with pure HTML and CSS, I would try it with JavaScript).

I work with default bootstrap elements like this.

    <div class="row">
        <div id="element1" class="col-sm">
            <img id="img1" src="1.jpg" />
        </div>
        <div id="element2" class="col-sm">
            <img id="img2" src="2.jpg" />
        </div>
        <div id="element3" class="col-sm">
            <img id="img3" src="3.jpg" />
        </div>
    </div>

All images should have the same width and height, although the image files have actually not the same width and height on file system.

If the images are too small or too large, the image should be scaled. If the ratio of height and width should not be correct, only a matching section of the image should be displayed.

Of course I do not expect finished solutions, but I would be very happy about approach ideas.

carapaece
  • 331
  • 4
  • 15
  • Is the tag required? Because you can use background-image on .col-sm elements, with background-size: cover; in that way the images will cover whole container, no matter the resolution of the image (while keeping the ratio of the image). – Mirza Mašić Dec 21 '18 at 08:25
  • no, the img tag is not required. I tried it already with div elements and background-images. but i thought, that would not be a very efficient solution. – carapaece Dec 21 '18 at 08:32
  • If you could provide a working demo of what you have that would be great. This would make things much easier to work with so maybe a code snippet in your question or maybe a [**JsFiddle**](http://jsfiddle.net) – NewToJS Dec 21 '18 at 08:42

0 Answers0