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

Question

我在 Wordpress 主题 (Jupiter) 中使用 Visual Composer 开发了一个网站。在大多数页面上都有一个全宽行，其中的图像最大宽度为 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 编码。

Answer 1

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

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

查询