Question

我正在研究流体网格风格的网站......我想在低于1280像素时将所有图像的尺寸减小75％，在800减少50％，依此类推...

是否正在使用IMG tag?

执行此操作

到目前为止，我已经尝试了

//html
<div style=" <?*php echo $Img_height_and_width)*?> position:relative;">
    <div class="imagediv">
        <img <?php echo $img_info/> />//My image
     </div>
</div>

//css
@media only screen and (max-width: 1280px) {
    .imagediv{ 
        width:70% 
     }
     ...
}

虽然这确实有效，但是文字包裹着更大的div ...所以我看到了2个选项

以其他方式重新调整大小
以某种方式使文本在包装

jsfiddle of why my code does not quite work

Answer 1

如果您使用'div'作为'img'的包装，您可以使用'div'的宽度控制'img'的宽度。您需要在from ast import literal_eval s = '(((3,),(4,2),(2,)),((1,),(2,4),(2,)))' t = literal_eval(s) print(t) print(type(t)) (((3,), (4, 2), (2,)), ((1,), (2, 4), (2,))) <class 'tuple'>上设置'img'的宽度。

Answer 2

您可以使用引导程序响应迅速

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="imagediv">
    <img <?php echo $img_info?> class="img-fluid" alt="profile" width="465px" height="400px" />//My image
 </div>
</body>
<html>

动态缩小图像大小

2 个答案: