How can I set the size of logos the same via CSS?

Question

The images are all of the same sizes. I use Image GIF and the size of the images on the hard disk is 415x72.

The images are placed in a table I want to make all images the same via css.

Images details on the hard disk:

view.jsp:

<%
logo ="<img src='/path/images/vendor/"+vendor.toLowerCase()+".gif' style='max-width:120px'/>";
%>

<liferay-ui:search-container-column-text name='vendor'
         cssClass="width-10" value="<%=logo%>" />

Image details:

I've looked into this link, but doesn't work for me. I couldn't get any solution to work to my requirement.

I tried this code below but the picture becomes blurry.

.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

view.jsp:

<%
logo ="<img class='img' src='/path/images/vendor/"+vendor.toLowerCase()+".gif' style='max-width:120px'/>";
%>

Images details after adding the code:

Is there a solution with the css or I have to use a software for image?

The requested result image of same size and clear:

requested result

Update:

1- I tried to change the width and set the height to auto but I did not get what I want.

2- I tried this line but did not work.

<%
logo = "<div class='img' style='background-image:url(\""+logoUrl+"\");' style='max-width:220px;'>&nbsp;</div>";
%>

3- I tried to resize with html tag <img> and to cut with background-image. I followed this link: CSS Display an Image Resized and Cropped I did not got a good result.

<%    
logo = "<div class='crop'><img class='img' src='"+logoUrl+"' style='max-width:120px;' alt='"+vendor.toLowerCase()+"'/></div>";
%>

css:

.crop {
    width: 160px;
    height: 120px;
    overflow: hidden;
}

.crop img {
    width: 565px;
    height: auto;
    margin: -75px 0 0 -100px;
}

Details images:

Images with 128x128 size

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?

The css code you have tried doesn't work because your image doesn't have a class `img` — sol, Nov 15 '17 at 14:13
@Coffeebean I want an acceptable size and it is all the same size. Is there a solution with the css or I have to use a software for image? — NewDark Magic, Nov 15 '17 at 14:13
You are changing the aspect ratio of the images by setting the height and the width to the same size. That is why they are squashed. just change the width and set the height to auto — Coffee bean, Nov 15 '17 at 14:17
@Coffeebean do I have to convert .GIF to .SVG and what exactly should I do? — NewDark Magic, Nov 15 '17 at 14:20
@Coffeebean I want a result like that checked the update. Is it possible? — NewDark Magic, Nov 15 '17 at 14:44
@Coffeebean pls check the requested result. I tried to change the width and set the height to auto but I did not get what I want. — NewDark Magic, Nov 15 '17 at 14:53

score 2 · Answer 1 · edited Nov 09 '21 at 06:58

2

Css :

.image-container { 
    width:300px;
    height:150px;
    text-align:center;
}

.image-container img {
    height:100%;
}

Html:

<div class="image-container">
    <img src="path"/>
</div>

edited Nov 09 '21 at 06:58

Naeem Khan

950
4
13
34

answered Nov 15 '17 at 15:59

Jamshed

290
1
8

thanks for your answer but it did not work. the images are not of the same size and are blurry. check the requested result. – NewDark Magic Nov 15 '17 at 16:07
Html code must be:
– Jamshed Nov 15 '17 at 16:20
a `
` inside a `` did not work. The logos are placed in a table. Check this [link] (https://stackoverflow.com/questions/1110915/is-a-div-inside-a-td-a-bad-idea).
– NewDark Magic Nov 15 '17 at 16:52

score -1 · Answer 2 · answered Aug 10 '23 at 13:43

-1

#logo img {
  position: relative;
  float: left;
  height: auto;
  width: auto;
  max-height: 50px;
  max-width: 200px;
  background-position: 50% 50%;
  background-repeat:   no-repeat;
  background-size:     contain;
}

 <div id="logo">
<img src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2019/08/amazon-logo-16x9jpg.jpg?auto=format&q=60&fit=max&w=930" alt="logo" />                   
</div>

answered Aug 10 '23 at 13:43

AR Saiyad

9
1

2

Please explain your answer. Never assume that everyone knows what it is that you did – j08691 Aug 10 '23 at 13:46

How can I set the size of logos the same via CSS?

Update:

2 Answers2