使用引导程序响应的图像

我试图在手机上看到这些图像时提供响应。当我现在使用它时，这些图像中的每一个都占据屏幕的所有宽度...我需要它响应。使用引导程序响应的图像

<!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>

感谢您的帮助！

来源

2016-12-13 amarc27

必须放在类属性的响应值，如下：

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

来源

2016-12-13 23:48:23 Mvram

由M.母鹿的回答，您可以使用引导程序的类img-responsive

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

或者你可以使用下面的CSS

img{ 
    max-width: 100%; 
    height: auto; // to maintain aspect ratio 
}

这将确保您的img最大宽度不再超过该屏幕宽度或浏览器宽度

来源

2016-12-14 01:28:00 Rahul

使用引导程序响应的图像

回答

相关问题