使用使用JavaScript [o ]动态设置的PHP变量进行HTML图像布局。。. .]
使用使用JavaScript [o ]动态设置的PHP变量进行HTML图像布局。。. .]
提问于 2016-04-10 22:44:02
让"O“表示HTML页面上的图像。下面是屏幕大小> X的HTML页面，其中X是一定数量的像素：
哦哦哦 哦哦哦 哦哦哦
例如，有12幅图像；然而，当在屏幕大小的≤X上查看时，我们应该得到：
面向对象 面向对象 面向对象 面向对象 面向对象 面向对象
该页面以下列方式使用PHP：
<?php
$images = glob("images/*.jpg");
foreach( $images as $image ){
<!-- <img...width:25%;display:inline-block;.../> -->
}
?>我想将这个百分比中的"25“作为变量，取决于视图端口是≤X还是> X；比如说，如果>X和w2 (如果≤X)，有什么方法可以不使用JavaScript来做到这一点吗？不过，我会接受JavaScript的回答。
"...“的意思是有更多的，但我没有在这里显示。
回答 2
Stack Overflow用户
发布于 2016-04-10 22:59:50
您可以使用CSS媒体查询来完成所需的任务：
/* default values */
img.class-name {
width: 25%; /* whatever your default value is */
}
@media (min-width: YYpx) {
img.class-name {
width: 50%; /* value when the screen is at least YY px wide */
}
}仅在IE 9+中支持媒体查询。
Stack Overflow用户
发布于 2016-04-10 22:59:57
根据预期的呈现缩放效果，尝试将css width设置为最小px或其他单位值加上15vw到25vw；将display设置为inline-block，将height设置为25vh
body {
width:100%;
height: 100%;
padding:4px;
}
img {
display:inline-block;
width:calc(50px + 15vw);
height:25vh;
border: 1px solid #000;
padding:4px;
}jsfiddle https://jsfiddle.net/wgjvq3b9/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36536416
复制相关文章
相似问题
腾讯云开发者
