I am having a problem that I cannot solve, it would be that my images are drastically modified when I shrink the screen, I had the images as the background of a div, using the property
background-image:url();
But when the container got smaller, the following happened:
(For mobile)
I had been able to solve this to a certain extent by putting the image directly in the html using:
<img src="./images/desktop/image-stand-out.jpg" alt="">
Explained with snippet:
*{
padding:0;
margin:0;
}
.forma-directa{
width:50%;
height:auto;
object-fit: cover;
}
.image{
background-image:url("imgur.com/K4MoWvl");
width:50%;
height:auto;
}
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Explicacion</title>
</head>
<body>
<div class="forma-con-img">
<img src="imgur.com/K4MoWvl" alt="" srcset="">
</div>
<div class="forma-con-div">
<div class="image"></div>
</div>
</body>
Thank you very much
The best way is to create a general div which contains within the child divs, which will be the ones that contain your image, within the child divs add the background-image attribute with css , with that you can add a background image without it affecting to other elements within the div, that includes text or other images.
The img tag works fine but it's an element, whereas a div with the background-image is a container so it doesn't affect other elements within the same div.
It should be noted that you will have to add a height and width to your container for it to be displayed, although it is also added based on the number of elements, I usually use padding if I previously know the size of the elements inside the child div, you can also use sizes in percentages, pixels or based on the viewport.
Here is a small example of how I would do it.
Within the background properties you can use background-size which is used to determine the size of the background images.
background-size: cover; if you want it to automatically scale, background-size: 100%; if you want it to always display 100% of the image size and you can play around with other sizes based on pixels, percentages, viewport or even calculations using the css calc function.
Use background-position to add a position of the image, center "center", top "top", bottom "bottom", bottom left "bottom right" or else based on calculations, this is usually the best way, But it's up to you how you feel more comfortable.