html - 缩小图像以适应移动设备不起作用

Question

我有一个公司的员工团队页面，我正在处理 HERE.

我的问题是员工的图片在移动设备上显示时不会按比例缩小。

我的 CSS 是这样的:

@media (max-width: 767px) {
    .employee-image {
        max-width: 85%;
        max-height: 85%;
    }
}

也许我在某处有冲突的 CSS？我不知道。

页面链接:http://texasca.com/team

CSS 链接:http://texasca.com/includes/team.css

Answer 1

看起来您正在使用 Bootstrap 。在 Bootstrap 中，您有一个名为 .img-responsive 的辅助类。您可以将 .employee-image 替换为 .img-responsive，我认为您会得到想要的结果。

为了更清楚 - 只需将 img-responsive 类添加到所需的图像。