Problem with Responsive Image

Question

Problem with Responsive Image

Navigation

#1 by (0 votes)

-1

img {
background-image: url(../img/slides/11.jpg);
max-width:100%;
height:auto;
}

When I put the above code, the following error occurs:

Theimage(asinthephoto)goesup.

Beingwithoutthecodelookslikethis:

WhatcanIdo?

html:

<divclass="bg-img bg-img-1"></div>

css:

#home .bg-img {
padding: 100px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: -50px;
left: -50px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}

#home .bg-img-1 {
background-image: url(../img/slides/11.jpg);}

css3

asked by anonymous 03.08.2017 / 02:40

1 answer

CSS does not load with $ _SESSION canvas photo bugged

score 0 · Answer 1

Work the background-image only on the parent of the img tag.

In the case of the img tag, leave the image path in the src attribute normally, and in CSS, remove the opacity completely, so the img tag takes care of filling the necessary space of the image, while the parent, with background-image, is responsible for displaying the image responsively within the limits.

In your example, the only available space was the 100px padding. so the background-image tried to fill only that space.

CSS Code:

#home .bg-img {
padding: 100px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: -50px;
left: -50px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}

#home .bg-img-1 { background-image: url(../img/slides/11.jpg); }
#home .bg-img img{ opacity: 0; }

HTML code:

<div class="bg-img bg-img-1">
<img src="../img/slides/11.jpg">
</div>