Question

[这是我的第一篇文章 - 请温柔;-)]

我有一个我试图用作页眉的一部分的图像。图像（有意）非常宽，因此可以在任何设备宽度上使用。

图像的一部分只是一条（图案化的）长线（看起来有点像绳子或绳子），可根据需要裁剪（从右侧）。

随着设备宽度的变化，我希望图像不改变比例，而是剪切字符串的末尾，以便图像的可见宽度遵循Bootstrap设置的宽度对于身体。

另一种说法：我仍然希望容器调整大小并随着设备宽度的变化做出响应，但是我不希望图像重新缩放，我希望它能够裁剪图像的最右边部分相反，它的父容器的边界。

我在HTML中有这样的东西：

<body class="container>
  <header class="row-fluid">
    <div class="my-image-container">
      <img class="my-image" src="images/my_image.png" alt="" />
    </div>
  </header>
  ...
</body>

和CSS：

.my-image-container {
  /* What to put here? */
}

.my-image {
  /* What to put here? */
}

我尝试使用以下内容：

.my-image {
  max-width: none;
  overflow: hidden;
}

然而，虽然它不再调整图像的大小，但是当我调整大小时，图像的末尾会运行到浏览器的边缘，而不是将其限制在body / header / div父级宽度的范围内。

还有其他问题/答案似乎在容器和图像（分别）中使用了相对/绝对位置，以及其他一些设置，但是我也没有太多运气。

我也尝试将图像分解成一个我可以重复的较小的片段，但结果输出并不美观。

我无法找到解决此问题的任何先前问题，我希望你能帮助我。

感谢您的意见！

Answer 1

使用背景图像可以更轻松地处理事情，并为您提供稍后添加文本等选项，这对标题来说是相当标准的：）

欢迎来到Stack Overflow，可能其他人都很温柔（祝你好运！）

＆＃13;

.my-image-container {
  height: 250px;
  background: url("http://placehold.it/800x250") top left no-repeat;
}

＆＃13;

<header class="row-fluid">
  <div class="my-image-container"></div>
</header>

＆＃13;

Bootstrap：剪辑图像而不调整大小并保持在容器内

1 个答案: