CODEWITHSUNDEEP
javascripthtmlcssbackground-imageimage-resizing
NewDark Magic
NewDark Magic

Reputation: 65

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

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: enter image description here

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:

enter image description here

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:

details after adding the codes

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?

Upvotes: 4

Views: 29983

Answers (2)

AR Saiyad
AR Saiyad

Reputation: 9

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

Upvotes: -1

Jamshed
Jamshed

Reputation: 300

Css :

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

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

Html:

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

Upvotes: 3

Related Questions