Adjust rules for sponsor logo rendering

This moves from forcing all the images to scale to a 150px width
to setting a max width/height value (150/65).

diff --git a/media/css/main.css b/media/css/main.css
index e7b1455c607ee81b899772e1bc35bdff2ac1861f..4bc6278d1440b1c0055e043f6f87062b0c76db19 100644 (file)
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -1473,6 +1473,16 @@ table.sponsor-table tbody tr td:nth-child(3) {
   width: 30%;
 }
 
+/**
+* This sets the rule for the rendering in the sponsors table. The name is chosen
+* to ensure compatibility with various browser plugins that may otherwise hide
+* images.
+**/
+img.organisation-logo {
+  max-height: 65px;
+  max-width: 150px;
+}
+
 /** Release Notes */
 #release-notes .navheader,
 #release-notes .navfooter,

diff --git a/templates/sponsors/sponsors.html b/templates/sponsors/sponsors.html
index 3cb43d79f13fd8eb747432470e9a53f83d42d10e..d1f801a3c6a6ff6c4b7bdf106c7c65acb6718c20 100644 (file)
--- a/templates/sponsors/sponsors.html
+++ b/templates/sponsors/sponsors.html
@@ -21,7 +21,7 @@ for each company shown.</p>
           <tr>
             <th scope="row">
               <a href="{{ sponsor.url }}" target="_blank" rel="noopener">
-                <img width="150" src="/media/img/about/sponsors/{{ sponsor.logoname }}" alt="{{ sponsor.name }}" />
+                <img class="organisation-logo" src="/media/img/about/sponsors/{{ sponsor.logoname }}" alt="{{ sponsor.name }}" />
               </a>
             </th>
             <td>