Home Display block and height not working for image
Reply: 0

Display block and height not working for image

user964
1#
user964 Published in April 22, 2018, 12:52 am

So I want my image to be automatically resized when screen resolution is under 740 pixels. This code is outside @media.

header img {
  display: block;
  height: 150px;
  margin: auto;
}

@media screen and (max-width: 740px) {
  header img {
    display: block;
    width: 100%;
    height: auto;
  }
}
<header>
  <img src="https://images.vexels.com/media/users/3/137694/isolated/lists/35e10823069d1767521320dc34475465-triangle-logo-geometric.png">
</header>

This code is not working! Why? When I check the code in chrom dev tools, these properties are deleted out except width:100%;!

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.302075 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO