0

I have a requirement where the same page can be used by different firms(our clients) and the image on the navbar must be their logo. Now, the logos that I am testing with are all of different size and dimensions.

I tried some ways like setting max height, max width etc, but since the logos themselves come in different sizes with height-width ratio different (say some are square an some are long names with an overall rectangle dimension like 380*200 ).

Now I need to somehow maintain this and still fit these images. Using css or HTML tags to achieve this. I am currently working with something like this: 

<img src="<?php echo $imageUrl?>" style="max-height: 180px;max-width: 40px"></a>
Kaushik Gopalan
  • 28
  • 2
  • 7
  • What's wrong with what you're doing now? I think it's the best solution because if you use a div with "background-size:contain" it will cut the image and hide the overflow. – tocqueville May 20 '16 at 08:58
  • the post by @Maurice helped. The function provided there solved the problem . Thank you. – Kaushik Gopalan May 20 '16 at 09:19

1 Answers1

0

You could try to use percentages in the widths and heights instead of using fixed pixels.

E.g. id/classofimg{ width:50%; }

Kode.Error404
  • 573
  • 5
  • 24