WordPress响应图像无法正常工作

时间:2017-07-11 04:19:10

标签: html css wordpress wordpress-theming

我正在为wordpress构建一个自定义主题,它表示在wordpress 4.4+之后,响应式图像内置于wordpress核心,但我的图像没有响应。我已经清除了我的缓存,并在我的手机上尝试了它,但它仍然无法正常工作。

这是我拍照的步骤:

在后期图片中:

  1. 添加媒体
  2. 选择完整尺寸并插入帖子
  3. 检查inspect元素:这是代码......
  4. <img class="size-full wp-image-28" src="https://www.example.com/wp-content/uploads/2017/07/picture1.jpg" alt="" width="1000" height="667" srcset="https://www.example.com/wp-content/uploads/2017/07/picture1.jpg 1000w, https://www.example.com/wp-content/uploads/2017/07/picture1.jpg 600w, https://www.example.com/wp-content/uploads/2017/07/picture1.jpg 768w, https://www.example.com/wp-content/uploads/2017/07/picture1.jpg 30w" sizes="(max-width: 1000px) 100vw, 1000px">

2 个答案:

答案 0 :(得分:1)

使用width:100%max-width:100%使其具有响应性,因为图片具有heightwidth属性,因此现在无响应。如果您需要,唯一的图像将更改为响应使用自动生成的类wp-image-28

Css Part like

img.size-full {
   width:100% !important;
   max-width:100% !important;
}

img.size-full.wp-image-28 {
   width:100% !important;
   max-width:100% !important;
}

答案 1 :(得分:0)

@media only screen and (max-width: 1023px){
    .entry-content img{
        max-width:50%;
    }
}

使用此方法有效,但是如果标题较长,它仍会弄乱图像周围的填充/边距。