<div>
If the images are not much bigger, you can do this with css or js just by setting the max-height or max-width. If the images are rather large, it would be best to resize them on the server.
</div>

Software Developer

APD Toronto

<div>
Hmmm... Are you saying applying max-height and max-width to all logos (as a class) should work? Simple as that? 
 
I'm thinking to restrict a max upload limit of 5MB, Is that too high?
</div>

<div>
Here is a solution using Flex box 
CSS 

<pre><code class="code-10 nolinks" id="code-20-43053684-1">.distorted-gallery {
 display: flex;
 flex-wrap: wrap;
 margin-left: -15px;
 margin-right: -15px;
}
.box {
 flex: 0 0 33.3333%;
 align-self: center;
 padding-left: 15px;
 padding-right: 15px;
 text-align: center;
}
.box img {
 max-width: 100%;
 max-height: 200px;
}
</code></pre>
HTML 

<pre><code class="code-1 nolinks" id="code-20-43053684-2">&lt;div class=&quot;distorted-gallery&quot;&gt;
 &lt;div class=&quot;box&quot;&gt;&lt;img src=&quot;images/canvasimg.png&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;box&quot;&gt;&lt;img src=&quot;images/audio-sprite.75x75.png&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;box&quot;&gt;&lt;img src=&quot;images/foreground1.png&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
Working sample <a href="http://www.marcorpsa.com/ee/t3816.html" rel="ugc">here</a>
</div>

WordPress Dev & WordPress Coach

Alicia St Rose

<div>
Slightly improved css 

<pre><code class="code-10 nolinks" id="code-20-43053687-1">.distorted-gallery {
 display: flex;
 flex-wrap: wrap;
 align-items: stretch;
 margin-left: -15px;
 margin-right: -15px;
}
.box {
 flex: 0 0 33.3333%;
 align-self: center;
 padding-left: 15px;
 padding-right: 15px;
 display: flex;
 align-items: center;
 justify-content: center;
 
}
.box img {
 max-width: 100%;
 max-height: 200px;
}
</code></pre>
</div>

<div>
I didn't fully understand what you were trying to do. I thought you had a specific area and I also mentioned resizing by js or css is only good if the images are not too big. &nbsp;Since you are saying you are uploading large files, you should really resize the the files to what you need on the server using php or command line depending on what is on your server. I use imagemagick on my server and so I use the appropriate command line or php <a href="https://www.php.net/manual/en/imagick.resizeimage.php" rel="ugc">https://www.php.net/manual/en/imagick.resizeimage.php</a> . &nbsp;I think most people have GD and you can review <a href="https://www.php.net/manual/en/function.imagecopyresized.php" rel="ugc">https://www.php.net/manual/en/function.imagecopyresized.php</a> . The approach I take when I use a custom cms is to resize the image for what is required. For something like a logo that may be used in multiple places with different sizes, I resize to what I need. Typically that will be keeping the height to something specific and then let the width go proportionally. You may want to test for the final size. If you find the width is too large after you have resized the height, give the user a message. If you end up resizing the height in that case, it may be too small. Instead, some cropping may be required. I don't do this though because I am working with a small enough group that I can just tell them the requirements of the starting image. The same is true for things like header images, carousel images, images that you may start off articles with. All of those are most likely going to be specific sizes. &nbsp;For images that will be inside of content and lets say you have a responsive site with two sizes, 1000px wide and 400px wide. For the desktop version of the image, you may want to resize it 300px wide and copy wraps around the left or right. For the small screen, you would want the image to be the full 400px. Keep in mind you will also want to resize an image used for thumbnails. I do that separately because when you make a thumbnail, it may be too small to just resize and you also want that to be a specific size which means it needs auto cropping or zooming. You will see in the first link there is an example for thumbnails.&nbsp; Or you can copy what Wordpress does and automatically resize to three to five sizes including a thumbnail. &nbsp; The takeaway is if you are allowing full size images to be uploaded, you want to limit them to size and also take down the quality. You don't want to serve a 1 meg image on your site.&nbsp;&nbsp;
</div>

<div>
<div class="content wysiwyg-content">
Hi Experts, 
 
How can I resize an image dynamically based on their original width or height, without distorting them? 
 
Let me elaborate... 
 
The images are logos that are uploaded by users, so their dimensions are unknown. Some squares, some vertical rectangles, others horizontal. In other words there are 3 possible shapes. 
 
I'm only in the planning phase for this, but i'll have a container (div) for these images, with a fixed size, let's say 190 x 60px. 
 
So based on the 3 shapes and on the known 190 x 60 container, I'd want to end up with the following if the shape is 
 

<ul>
<li>Square</li>
<li>, then the display size would be </li>
<li>60 x 60</li>
</ul>
 

<ul>
<li>Horizontal</li>
<li>, then the display size would be </li>
<li>190 x calc</li>
</ul>
 

<ul>
<li>Vertical</li>
<li>, then the display size would be </li>
<li>calc x 60</li>
</ul>
 
In each scenario, the img would remain its original size if it is less than 190x60 I think 
 
Now, I know calc would be proportional. For example, for vertical, calc (or width) would be 60/[orig_height]x[orig_width] 
 
So, my first question is how to obtain the original dimensions of a given image file? 
 
Secondly, what is the easiest way to do this, considering that I'm using PHP/jQuery/SCSS? I'm leaning towards doing it all on the &nbsp;PHP side. 
 
Thank you.
</div>
</div>

Hi Experts,

How can I resize an image dynamically based on their original width or height, without distorting them?

Let me elaborate...

The images are logos that are uploaded by users, so their dimensions are unknown. Some squares, some vertical rectangles, others horizontal. In other words there are 3 possible shapes.

I'm only in the planning phase for this, but i'll have a container (div) for these images, with a fixed size, let's say 190 x 60px.

So based on the 3 shapes and on the known 190 x 60 container, I'd want to end up with the following if the shape is

Square, then the display size would be 
60 x 60

Horizontal, then the display size would be 
190 x calc

Vertical, then the display size would be 
calc x 60

In each scenario, the img would remain its original size if it is less than 190x60 I think

Now, I know calc would be proportional. For example, for vertical, calc (or width) would be 60/[orig_height]x[orig_width]

So, my first question is how to obtain the original dimensions of a given image file?

Secondly, what is the easiest way to do this, considering that I'm using PHP/jQuery/SCSS? I'm leaning towards doing it all on the  PHP side.

Thank you.

Image size based on width/height

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.