制作响应较大的图像

Question

我试图制作一个响应式电子邮件模板，用信封从信封中取出。

该字母小于信封，我无法以与div相同的方式调整它。
如果我把width: 100%放在信封上，我会得到相同的div大小，所以不好。
如果我把margin-left: -50px;放在左边，右边的信封保持默认大小和div大小。

我正在使用引导网格系统。

这是模板：http://www.kakaostudio.it/newsletter_v1/index_test.html

这是最终的结果：

Answer 1

蛮力的方法是如下，这会给你如何进行一个好主意。

.envelop img { 
margin-top: 50px; 
margin-left: -60px; 
width: 113%; 
} 
.envelop { 
padding: 0; 
margin: 0; 
} 

通过这样做，您可以使信封的宽度更大，以便与上面的div相匹配。然后将其左移至负左边。

我有一个1920px宽度的屏幕，它对我来说完全同步显示，但它对这种方法没有反应。您需要使用许多媒体查询来调整大小。

您可以尝试左右空白负数％或甚至更好的“vw”值。位置：左边的相对值和负值会给出与边缘左边相同的结果。

Image我的方法的结果。