Question

当我们用手机看到它时，我试图让这些图像响应。当我现在使用它时，每个图像都占据屏幕的所有宽度...我需要它响应。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Signature Helpers - En Marche</title>
    </head>
    <body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;">
          <div>
            <a href="https://www.en-marche.fr/suivez-en-marche/?utm_source=SIGNATURE&utm_campaign=SIGNATURE&utm_medium=MAIL"> <img src="https://storage.googleapis.com/en-marche-fr/COMMUNICATION/SIGNATURE-E-MAIL/Signature_suivez_nous.png" height="28"/></a><span><a href="https://www.facebook.com/EnMarche"><img src="https://storage.googleapis.com/en-marche-fr/COMMUNICATION/SIGNATURE-E-MAIL/Signature_facebook.png" height="28"/></a><span><a href="https://www.instagram.com/enmarchefr/"><img src="https://storage.googleapis.com/en-marche-fr/COMMUNICATION/SIGNATURE-E-MAIL/Signature_insta.png" height="28"/></a><span><a href="https://twitter.com/enmarchefr"><img src="https://storage.googleapis.com/en-marche-fr/COMMUNICATION/SIGNATURE-E-MAIL/Signature_twitter.png" height="28"/></a><span>
            <br>
            <a href="https://storage.googleapis.com/en-marche-fr/Territoire/EN-MARCHE-KIT-DE-L-ENGAGE.pdf"> <img src="https://storage.googleapis.com/en-marche-fr/COMMUNICATION/SIGNATURE-E-MAIL/Signature_kit.png" height="28"/></a>
            <a href="https://www.en-marche.fr/espaceperso/?utm_source=SIGNATURE&utm_campaign=SIGNATURE&utm_medium=MAIL"><img src="https://storage.googleapis.com/en-marche-fr/COMMUNICATION/SIGNATURE-E-MAIL/Signature_comite%CC%81s.png" height="28"/></a>
            <br>
            <a href="https://www.en-marche.fr/?utm_source=SIGNATURE&utm_campaign=SIGNATURE&utm_medium=MAIL"> <img src="https://storage.googleapis.com/en-marche-fr/COMMUNICATION/SIGNATURE-E-MAIL/Signature_site.png" height="28"/></a>
        </div>
    </body>
</html>

感谢您的帮助！

Answer 1

您必须在响应值中加入class属性，如下所示：

<img class="img-responsive"  src="images/example.png" alt="">

Answer 2

正如M. Doe的回答，你可以使用bootstrap的课程std::wstring_convert

ProcName

或者您可以使用以下css

img-responsive

这将确保您的img max width不再是屏幕宽度或浏览器宽度

使用bootstrap响应的图像

2 个答案: