需要图像以在移动设备中保留特定高度答案

【问题标题】：Need image to retain specific height in mobile需要图像以在移动设备中保留特定高度
【发布时间】：2017-11-10 19:49:26
【问题描述】：

我在一个网站上使用 Visual Composer 在 Wordpress 主题（Jupiter）中进行了开发。在大多数页面上，都有一个全宽行，其中的图像最大宽度为 1600 像素。客户不喜欢随着浏览器窗口/移动响应变小，照片缩小得有多小。

http://spiderman.ephronsystems.com/full-width-tester/

我在媒体查询中添加了这个 CSS：

div.vc_single_image-wrapper.vc_box_border_grey {overflow:hidden;}
img.vc_single_image-img.attachment-full {height: 200px;width:auto;max-width:none;margin:0 auto;}

这似乎工作得很好，但我宁愿图像在浏览器窗口中居中。有人知道怎么修这个东西吗？我也可以直接用html替换VC编码。

【问题讨论】：

标签： html css wordpress

【解决方案1】：

在下面的img 上添加margin-left: 50%; 和transform:translateX(-50%);

@media (max-width: 736px) {
  .wpb_single_image img {
    height: 200px;
    width:auto;
    max-width:none;
    margin:0 auto;
    margin-left: 50%;
    transform:translateX(-50%);
  }
}

查询

【讨论】：