Pozitsionirovanie the image inside the block?

0 like 0 dislike
15 views
I use bootstrap, and Flex units to create a grid of products for online store. It is necessary to properly process images so they would fit in the unit with a specific pitch height. And all the pictures are very different, from the phone to the fridge).
Yet have only this code(for the image)
image
by | 15 views

4 Answers

0 like 0 dislike
I would venture to suggest, perhaps not the best, but fast and virtually hassle-free option of using background-image

\r
image\r
in principle, I have this:
\r

.img-block { background-position: center; background-repeat: no-repeat; background-size: cover; } .img-block img { opacity: 0; }


Hide IMG, instead show a background-image.
Pros: cross-browser compatibility, easy to edit code, not required to prepare illustrations
Cons: cluttering of the code, although if SEO is not so important and you specify block sizes, it image can be quite clear.
* if at all image to insert the same file something.img, it is possible to control the linear dimensions of the block without specifying its size in styles.

example https://codepen.io/tolfy/pen/MGVbwJ
by
0 like 0 dislike
img { width: 100%; height: 100%; object-fit: cover; // contain }


More you will not do anything with my pictures.
by
0 like 0 dislike
If Aspect Ratio is different (aspect ratio 1:1, 3:2, 8:5 etc), I think the robots will not help you in this case, when the item card must be the same size - only handmade, customized own, or hire a designer and content Manager
by
0 like 0 dislike
if an Internet store, it is best not flake, and css grid use
by

Related questions

0 like 0 dislike
3 answers
asked Apr 13, 2019 by misha979797
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
3 answers
110,608 questions
257,186 answers
0 comments
33,568 users