使用 cms 上传器的 wordpress 响应式图像答案

【问题标题】：wordpress responsive images using the cms uploader使用 cms 上传器的 wordpress 响应式图像
【发布时间】：2015-07-29 07:45:37
【问题描述】：

我经常构建（使用响应式 wordpress 模板）允许用户将图像上传到 cms 页面的网站。

不是最热门的 php，但希望能够设置它，以便我可以使用 cms 向图像添加类。比如……

通常为 50% 宽度，768 像素以下为 100%。

我可以做 css，只是不知道如何允许 cms 用户访问这个？

【问题讨论】：

标签： php wordpress responsive-design

【解决方案1】：

您可以托管一个页面，您可以在其中获取图像的元素并将其存储到存储图像的同一文件夹中。您所要做的就是重定向一次到调整图片大小的页面。你可以使用代码点火器它有最好的图像处理类 https://ellislab.com/codeigniter/user-guide/libraries/image_lib.html

        $this->load->library('image_lib');
        $config['image_library'] = 'gd2';
        $config['source_image'] = "image src here"; //with complete path
        $config['create_thumb'] = false;
        $config['maintain_ratio'] = TRUE;
        $config['width']    = 1920;
        $config['height']   = 800;
        $config['overwrite'] = TRUE;
        $config['new_image'] = 'newimage.jpg'; //with complete path

$this->image_lib->initialize($config); $this->image_lib->resize();

【讨论】：

所以这会重新创建图像吗？并允许用户申请新课程？我很困惑，你介意再解释一下吗？
是的 ypu 可以将其保存为新名称添加水印裁剪调整大小做任何你想做的事......

【解决方案2】：

最简单的方法是在你的 CSS 中设置类并在“文本”选项卡中引用它，或者直接编辑当前类...

.align-right{
    width:50%;
    float:right;
    margin:10px 0 10px 10px;
}
@media only screen and (max-width: 768px) {
        .align-right{
        width:100%;
        float:none;
        margin:10px 0 10px 0;
    }
}

将它放在样式表的底部以覆盖，或者放在新的样式表上，或者在最坏的情况下添加！重要。注意添加的“边距”以在图像和文本之间保持缓冲区。您可能需要稍微调整一些其他部分才能让它看起来不错。

【讨论】：

感谢您的支持！显示：块；可以肯定的是，图像上的图像可能值得您做，并且还可以将媒体查询包装在第一类中。
第一部分不会覆盖底部吗？
它不会，因为它是一个“级联样式表”，这意味着最后的任何内容都将覆盖上面，但最佳实践可能是将顶部部分包裹在 @media only screen 和 '(min-width: 769px) {'