如何使图片显示在屏幕的一半上? [英] How can I make my picture display on a half of the screen?

问题描述

当设备的宽度超过540像素时，我希望我的图片显示在屏幕的一半上.但是我的代码不起作用.怎么了?

I want my picture display on a half of the screen when device has a width more than 540px. But my code doesn't work. What's wrong?

<picture>
  <img src="https://i.postimg.cc/dtQLbqkK/photo-2020-10-08-12-15-49.jpg 426w" sizes="(min-width: 540px) 50vw">
  <source srcset="https://i.postimg.cc/4drQ8YNZ/photo-2020-10-08-12-06-49.jpg 1280w 3x, https://i.postimg.cc/SsWnhRfm/photo-2020-10-08-12-14-56.jpg 2x" media="(min-width: 540px) 50vw">
</picture>

推荐答案

可以直接使用css进行如下设置:

It works fine directly set with css as followed:

@media only screen and (min-width: 540px){
  picture{
    width: 100vw;
  }
  img, source{
    min-width: 50vw;
    width: 50%;
  }
}

<picture>
  <img src="https://i.postimg.cc/dtQLbqkK/photo-2020-10-08-12-15-49.jpg 426w" sizes="(min-width: 540px) 50vw">
  <source srcset="https://i.postimg.cc/4drQ8YNZ/photo-2020-10-08-12-06-49.jpg 1280w 3x, https://i.postimg.cc/SsWnhRfm/photo-2020-10-08-12-14-56.jpg 2x" media="(min-width: 540px) 50vw">
</picture>

这篇关于如何使图片显示在屏幕的一半上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！