How to include a division inside a image tag in HTML?

Question

I am at the end of a project. I have written a lot of lines of CSS code and adding the images to a class/id would mean editing a lot of code that I have written. It would be better if a division is added inside a image tag in HTML.

Hence my question is: How to include a division inside a image tag in HTML?

Pseudo selectors might work for me but how do I do it with Pseudo selectors?

If you are not able to solve it, have a look at this link where I have used a different approach:

Make division image responsive

Answer 1

So to not have all the things in the comments I post an answer.

The "problem" on screen-/ viewport widths of 380px and below has several issues.

On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:

.slider-wrapper3 {
   background-size: contain; /* you use cover */
   background-repeat: no-repeat;
   /* keep the rest of your actual code */
}

and remove the width setting (width: 310px;) at least for your small screen layout!

By doing so you have then fixed the position and size of the container (and also the background image).

So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from).