在我的网站的移动版本中使图像百分比更大

Question

现在我在我的国家的当地商店做一些自由职业。我只是想为此做一个总体草稿，当我找到一份新工作时，我可以通过改变颜色等来操纵它。:) 即使我是这个领域的新手，也能得到一些小工作。

但是，我对响应式图像感到困扰。我很高兴我的图像在整个桌面页面上占 %50。它非常适合。但是在移动页面上 %50 太小了。我希望它在移动版页面上占据更多百分比。我不知道这是否可能。我尝试了媒体查询，但它对此不起作用。我要分享我的 codepen link 所以你们可以研究一下吗？祝你有美好的一天。

@media only screen and(max-width:700px) {
    img { 
        width:60%;
    }
}

Answer 1

媒体查询是一种选择，但我认为 max-width 效果更好。

img{
  max-width: 1000px;
  width: 100%;
}

所以现在在桌面上，它将是 1000 像素，如果屏幕太小，它会随屏幕宽度缩放。

Answer 2

space

有问题

@media only screen and (max-width:700px){
    img{
        width: 100%;
        height: auto;
    }
}

现在媒体查询可以正常工作了

Making image percentage bigger in mobile version of my website