How To Change Image Size

HTML & CSS
1

Good morning,

In my HTML I have specified an image source as such:

<div class="container1">
     <a href="../pageMaatjes/index.html"><img src="/imgMaster/maatjesButton.png"   alt="maatjesButton" style="width: 25vw" class="center"></a>
  </div>

It works fine.

However, on smaller screens in portrait orientation, I would like the image width to be 50vw. What would I put in the css to do this? I believe it would start as:

@media screen and (max-width: 767px) and (orientation: portrait) {

Thanks

2

Hi,

You can’t override styles set in the style attribute from a css file unless you qualify them with !important.

You can’t add media queries into the style attribute either if that’s what you were thinking?

Move all your styling to an external stylesheet and then the media query will work when required.

However you should lose the orientation query as you are not interested in that. The only thing that is important is at what width you change the design.

Also when you change the width of an image you should make sure you also set the image height to auto otherwise it may not maintain its aspect ratio.

Forget about devices and concentrate on the design in question and change the design when it requires to change at whatever width that maybe. In that way you automatically cater for all devices now and in the future.

Basically mobile screens are just smaller screens so you don’t need to differentiate between devices. Just concentrate on the needs of the design. You can’t reliably test for mobile only anyway :slight_smile:

2 Likes