如何使用引导程序使图像响应答案

【问题标题】：How to make image responsive with bootstrap如何使用引导程序使图像响应
【发布时间】：2017-01-10 01:49:33
【问题描述】：

我一直在下面的这个网站上工作，我试图让导航菜单下显示的横幅响应式，一旦你缩小到 iPhone 尺寸的肖像，你仍然可以在横幅中看到播放器。

此区域的代码在此处的 css 中。

.tp-page-header {
    background-image: url("../images/page-header.jpg");
    background-repeat: no-repeat;
    padding-bottom: 20px;
    padding-top: 20px;}

网站链接在这里。 http://dagrafixdesigns.com/2019/industrial-darker/about-us.html

此横幅位于每个子菜单链接下，而不是主页，因为它有滑块。我不确定是否可以对 CSS 代码做任何事情以使其具有响应性，或者它必须在 HTML 中，就像顶部横幅一样。

我已经在一定程度上以 HTML 方式进行了尝试，但我没有运气。

没什么大不了的，因为如果这不起作用，我可以获得此背景的图像颜色或 css 颜色，但我认为如果它按比例响应会很好。

谢谢

【问题讨论】：

标签： html css twitter-bootstrap responsive

【解决方案1】：

试试background-size: cover; 和background-position: 80% 0; 的组合。 background-size 将缩小图像大小以匹配调整大小时的容器大小，background-position 将在 x 轴上向右移动一点，以便您可以看到足球运动员的头部。

【讨论】：

@Mcoker 您的解决方案很准确，非常适合这种情况。感谢您今晚抽出时间帮助我，先生。谢谢
@DA-G-GURU 字！没问题。

【解决方案2】：

我会说为 ex 480 制作较小版本的图像是 iPhone 的像素大小，因此将其设为 40 并将其居中。要在缩小时显示图像，请使用 @media (max-width 480px) 并在块内部，将背景图像设置为新的

【讨论】：

@MParksjr 谢谢你的帖子，虽然我觉得这种方法也行得通（因为我有一些媒体 css 经验），但我觉得我的问题的最佳解决方案是从 Mcoker 上面解决的。非常感谢您在这件事上为我提供的帮助。