応答のある画像を作成する

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"の左側の余白、またはそれより優れた値でマイナスの％で再生してみてください。 Position：相対的な値で、leftの値が負の値の場合、margin-leftと同じ結果が得られます。

Image私のアプローチの結果です。