Question

如何在列内响应地包装图像。图像不适合列和360px的屏幕。

Alt + v

Answer 1

在图片上设置max-width属性，它们应该很合适。

css：img{max-width:100%}

或者，您可以将样式直接应用于元素。例如，更改此：

<img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">

到此：

<img style="max-width:100%" src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">

Answer 2

您需要像这样声明宽度和高度。

<img style="width:100%; height:auto;" src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">

Answer 3

添加此样式，您的图像应自动适合您设置的网格大小，避免像素在网格中，除非您需要修复大小尝试百分比，如20％，休息取决于您的项目

<style>    
body img{max-width:100%;width:100%;vertical-align:unset;text-align:center;}
</style>

那就是它。

列内的图像不适合320px屏幕

3 个答案: