Responsive image

Question

Hello
I have a problem with a image that is responsive.
The image is my header and background and after changing the height of it some part of the image has hide in mobile mode.
But in pc everything is ok.
What's the problem?

Answer 1

this will work. Try using a PC to practice and experiment with developer tools in browser. It will help you a lot.

.box1{
padding:0;
margin:auto;
}

.row{
height:250px;
width: 100%;
background-image: url("https://s18.picofile.com/file/8434664176/aboutus_org.jpg");
background-size: cover;
margin: 50px 0 0;
background-position: center
}

Answer 2

did you use the background-size property?

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

there are two useful keyword values: 'contain' and 'cover'

Answer 3

FRam

Problem is that Mobile screen size is different, PC screen size is different so you have make responsive.

How to make responsive, you can learn here

https://www.sololearn.com/post/455766/?ref=app

Answer 4

'cover' crop the image to cover entirely the element zone.

'contain' fit the whole image to be entirely showed in the element zone.

the downside of the second, is that you must choose between repeating the image to cover all the zone (default) or no repeat, but letting either showing background-color or nothing (what is under/parent)... by using background-repeat:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Answer 5

*Only for Image*
Use
max-width or max-height properties in css. So that the image doesn't cross that limit. Even if it is a bigger image it will get scaled to that limit.

Answer 6

Aravind Shetty
How is its syntax?
Au usual width or height?

Answer 7

img{
max-width: value;
}

Answer 8

relative paths don't work with code playground: you must provide absolute one (image stored on cloud)

Answer 9

https://code.sololearn.com/WA22A13a11A1/?ref=app
This is my edited code

Answer 10

FRam

sorry, your image is valid but is not displayed on my phone :(

even your .row class element seems to not be displayed (background-color nor outline seems to NOT work in the css)

have you tested your code from the playground link you provided?

I can't help further, all the more that I'm not aware of bootstrap ;P

Answer 11

visph
Ok thank you🙏

Answer 12

Aravind Shetty
Yes it works😍
Thanks for your help🙏

Answer 13

visph
I used cover element but didn't work