title: How can I set the size of logos the same via CSS?
body: <p>The images are all of the same sizes.
  I use Image GIF and the size of the images on the hard disk is 415x72.</p>
  <p>The images are placed in a table I want to make all images the same via css.</p>
  <p>Images details on the hard disk:
  <a href="https://i.stack.imgur.com/WtxEu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WtxEu.png" alt="enter image description here" /></a></p>
  <p>view.jsp:</p>
  <pre><code>&lt;%
  logo =&quot;&lt;img src='/path/images/vendor/&quot;+vendor.toLowerCase()+&quot;.gif' style='max-width:120px'/&gt;&quot;;
  %&gt;
  
  &lt;liferay-ui:search-container-column-text name='vendor'
           cssClass=&quot;width-10&quot; value=&quot;&lt;%=logo%&gt;&quot; /&gt;
  </code></pre>
  <p>Image details:</p>
  <p><a href="https://i.stack.imgur.com/it88k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/it88k.png" alt="enter image description here" /></a></p>
  <p>I've looked into this <a href="https://stackoverflow.com/questions/19414856/how-can-i-make-all-images-of-different-height-and-width-the-same-via-css">link</a>, but doesn't work for me. I couldn't get any solution to work to my requirement.</p>
  <p>I tried this code below but the picture becomes blurry.</p>
  <pre><code>.img {
      position: relative;
      float: left;
      width:  100px;
      height: 100px;
      background-position: 50% 50%;
      background-repeat:   no-repeat;
      background-size:     cover;
  }
  </code></pre>
  <p>view.jsp:</p>
  <pre><code>&lt;%
  logo =&quot;&lt;img class='img' src='/path/images/vendor/&quot;+vendor.toLowerCase()+&quot;.gif' style='max-width:120px'/&gt;&quot;;
  %&gt;
  </code></pre>
  <p>Images details after adding the code:</p>
  <p><a href="https://i.stack.imgur.com/YWdKY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YWdKY.png" alt="details after adding the codes" /></a></p>
  <p>Is there a solution with the css or I have to use a software for image?</p>
  <p>The requested result image of same size and clear:</p>
  <p><a href="https://i.stack.imgur.com/Vjl9m.png" rel="nofollow noreferrer">requested result</a></p>
  <h3>Update:</h3>
  <p>1- I tried to change the width and set the height to auto but I did not get what I want.</p>
  <p>2- I tried this line but did not work.</p>
  <pre><code>&lt;%
  logo = &quot;&lt;div class='img' style='background-image:url(\&quot;&quot;+logoUrl+&quot;\&quot;);' style='max-width:220px;'&gt;&amp;nbsp;&lt;/div&gt;&quot;;
  %&gt;
  </code></pre>
  <p>3- I tried to resize with html tag <code>&lt;img&gt;</code> and to cut with <code>background-image</code>.
  I followed this link: <a href="https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped">CSS Display an Image Resized and Cropped</a> I did not got a good result.</p>
  <pre><code>&lt;%    
  logo = &quot;&lt;div class='crop'&gt;&lt;img class='img' src='&quot;+logoUrl+&quot;' style='max-width:120px;' alt='&quot;+vendor.toLowerCase()+&quot;'/&gt;&lt;/div&gt;&quot;;
  %&gt;
  </code></pre>
  <p>css:</p>
  <pre><code>.crop {
      width: 160px;
      height: 120px;
      overflow: hidden;
  }
  
  .crop img {
      width: 565px;
      height: auto;
      margin: -75px 0 0 -100px;
  }
  </code></pre>
  <p>Details images:</p>
  <p><a href="https://i.stack.imgur.com/YXvNr.png" rel="nofollow noreferrer">Images with 128x128 size</a></p>
  <p>From the outside the images are the same size but from the inside they are not the same size. I want images with the same height and width without modifying the aspect ratio of the images. How can I do that?</p>