css - Change header image size

admin管理员组

文章数量:1130349

I have a header image which looks great on desktop, however, when accessing the site on a mobile device, the image gets cut off in the middle.

How can I make it that the image automatically rescales when accessing the page on a mobile device, so that its width matches the width of the screen.

I have tried adding the following CSS code, but somehow, it doesnt seem to reference to the header image:

header-showcase {
height: auto;
max-width: 100%;
}

Here is the link to the site I am working on:

Thank you very much in advance.

I have a header image which looks great on desktop, however, when accessing the site on a mobile device, the image gets cut off in the middle.

How can I make it that the image automatically rescales when accessing the page on a mobile device, so that its width matches the width of the screen.

I have tried adding the following CSS code, but somehow, it doesnt seem to reference to the header image:

header-showcase {
height: auto;
max-width: 100%;
}

Here is the link to the site I am working on: http://www.mathiasprobst

Thank you very much in advance.

• images
• css
• headers

Share Improve this question edited Jan 12, 2019 at 16:59 Mathias Probst asked Jan 6, 2019 at 1:36 Mathias ProbstMathias Probst 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try using these codes:

.header-showcase img {
height: auto;
max-width: 100%;
}

I have a header image which looks great on desktop, however, when accessing the site on a mobile device, the image gets cut off in the middle.

How can I make it that the image automatically rescales when accessing the page on a mobile device, so that its width matches the width of the screen.

I have tried adding the following CSS code, but somehow, it doesnt seem to reference to the header image:

header-showcase {
height: auto;
max-width: 100%;
}

Here is the link to the site I am working on:

Thank you very much in advance.

I have a header image which looks great on desktop, however, when accessing the site on a mobile device, the image gets cut off in the middle.

How can I make it that the image automatically rescales when accessing the page on a mobile device, so that its width matches the width of the screen.

I have tried adding the following CSS code, but somehow, it doesnt seem to reference to the header image:

header-showcase {
height: auto;
max-width: 100%;
}

Here is the link to the site I am working on: http://www.mathiasprobst

Thank you very much in advance.

• images
• css
• headers

Share Improve this question edited Jan 12, 2019 at 16:59 Mathias Probst asked Jan 6, 2019 at 1:36 Mathias ProbstMathias Probst 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try using these codes:

.header-showcase img {
height: auto;
max-width: 100%;
}

本文标签： cssChange header image size