引导：不调整，保持容器

内的剪辑图像[这是我的第一篇文章 - 请温柔;-)]引导：不调整，保持容器

我有我想要的页面头部的一部分使用的图像。图像（有意）非常宽，所以它可以在任何设备宽度上使用。

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

随着设备宽度的变化，我想图像不是更改比例尺，而是剪辑字符串的末尾，以便图像的可见宽度遵循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父母的宽度限制。

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

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

我一直没有找到任何解决这个问题的先前的问题，我希望你能帮助我。

欣赏您的输入！

来源

2017-03-05 booraroom

使用背景图片将要走的事情更简单的方法，后来让您选择添加在上面的文字等，这是头:)

欢迎堆栈溢出比较规范的，每个人都可以否则温柔（祝你好运！）

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

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

来源

2017-03-05 18:42:39 mayersdesign

工作就像在第一次尝试一个魅力。非常感谢您的及时回复（以及热烈的欢迎）。 – booraroom

这很棒，向上和向上 – mayersdesign

引导：不调整，保持容器

回答

相关问题