如何根据WordPress中的视口大小提供不同大小的图像
How to provide different sizes of images according to viewport size in WordPress?
可能
是一个非常基本的问题,因为对程序的理解较少,但我认为没有问题就不那么重要了。
在WordPress中,我们有4个默认大小:
- 原始(因为它无处不在( - 没有裁剪
- 大型 - 通常为 1024 × 1024
- 中等 - 通常为 300 × 300 缩略图 - 通常为 150
- × 150 - 硬裁剪
停用除原始尺寸以外的所有默认尺寸,并且可以添加/编辑/删除任何自定义尺寸,甚至可以使用宽屏设备的自定义脚本启用 2 倍支持。但这就是我的理解停止的地方——我们有我们想要的图像及其尺寸,现在呢?我们如何根据视口大小显示/交付它们?
假设我有一个代码部分是:
<article class="news">
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) ); ?>
<div class="entry-excerpt"><?php the_excerpt(); ?></div>
</article>
如果我需要在那里抛出图像的 2 倍(更宽(版本(而不是缩略图(,我该怎么做?
我问这个问题是因为如果没有JavaScript的帮助,我们就无法使用PHP识别视口大小,并且设计JS是额外的 - 不是强制性的。如果我们认为我们必须在不使用 JS 的情况下根据视口大小抛出图像,那么我们该怎么做呢?这才是真正给我带来痛苦的原因。
我只能想到一个没有JS的解决方案,而且它是坏的。您可以加载所有图像,并使用CSS媒体查询仅显示一个图像。您的网站将庞大而缓慢,但如果您无法使用JS,这是我能想到的唯一选择。
PHP get_browser(http://php.net/manual/en/function.get-browser.php( 可用于对客户端窗口大小进行某种原始估计。但这只是一个估计。
我建议的解决方案是在 HTML 数据属性中输出所有图像并使用 JS 确定正确的大小,然后用 corect src 替换以前空的 src
图像元素示例:
<img src=""
data-full-src=" full-link "
data-large-src=" large-link "
data-medium-src=" medium-link "
data-small-src=" small-link " />
JS函数示例:
var image = getElementById( your-img-ID ); //or some other selector
var selectedSrc = "data-full-src";
image.setAttribute('src', image.getAttribute(selectedSrc) );
相关文章:
- 将视口底部滚动到元素底部
- 使用JavaScript根据窗口/视口的高度动态调整图像大小
- 使用条件语句,使 jquery fadeIn/fadeOut 仅在视口 >= 480px 时才有效
- 宽度为100%的CSS元素位于视口之外
- CSS3:当页面向下滚动到第一个视口时,是否可以在元素上触发转换
- 如何设置浏览器视口大小
- Javascript em根据窗口/视口尺寸调整大小,不影响文档样式的text/css
- 检测视口并重定向到不同的主页
- 如何在按住鼠标按钮且光标在视口外时检测鼠标离开
- iOS iPad平板电脑渲染视口不正确
- 移动设备上的视口问题
- 视口大小更改时自动刷新页面
- 使用Javascript调整图像大小,使其适合视口
- 图像宽度与视口宽度不成比例时的响应式图像
- 如何根据WordPress中的视口大小提供不同大小的图像
- 如何相对于视口调整画布图像
- 如何在extjs4的视口区域中拟合图像
- 如何隐藏视口外的图像
- 在视口外加载图像
- 有关视口和大图像导航的问题