CODEWITHSUNDEEP
htmlcssimage
Eva
Eva

Reputation: 294

How can I make my picture appear correctly?

I have two pictures: small and big youtube logo. I want my big youtube logo display when the width of my screen is more than 600px. And I want my small youtube logo display when the width of my screen is less than 600px.

!Also my big logo have to be on a half of the screen. But there's the problem. When I establish to my big logo some properties to make it behave this way, this logo stopes display at all.

Here's my code:

<picture>
  <source srcset="https://i.postimg.cc/L5hRsX4B/youtube-logo-font.jpg" media="(min-width: 600px) 50vw">
  <source srcset="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg">
  <img src="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" alt="photo-youtube">
</picture>

What did cause this bahaviour? And how can I fix this? Thanks!

Upvotes: 0

Views: 104

Answers (3)

MaxiGui
MaxiGui

Reputation: 6348

It works fine directly set with css media query as followed:

Demo 

@media only screen and (min-width: 600px){
  picture{
    width: 100vw;
  }
  img, source{
    min-width: 50vw;
    width: 50%;
  }
}
<picture>
  <source srcset="https://i.postimg.cc/L5hRsX4B/youtube-logo-font.jpg" media="(min-width: 600px) 50vw">
  <source srcset="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg">
  <img src="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" alt="photo-youtube">
</picture>

Upvotes: 1

Eva
Eva

Reputation: 294

I got it! There is the thing that I mixed up with 2 attributes: media and sizes. They work differently. We should establish media attribute without desired width of element. For example:

media="(min-width:650px)"

And we can establish sizes attribute with the width of our element. For example:

sizes="(max-width: 320px) 280px"

And also this attribute can work like this. This example shows that we have to establish the desired width of our element in sizes attribute. It's necessary!

sizes="280px"

We can use media if we want to replace some pictures. And we can use sizes if we want our pictures responsive. There's no html property which can solve this problem. So, the best way is using CSS (or JS) aditionally.

Upvotes: 1

karim
karim

Reputation: 25

for this project you should put media="max-width:600px" and run project.

<picture>
  <source srcset="https://i.postimg.cc/L5hRsX4B/youtube-logo-font.jpg" media="(min-width: 600px)  ">
  <source srcset="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" media="(max-width:600px)">
  <img src="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" alt="photo-youtube">
</picture>

Upvotes: 0

Related Questions