Scale imported image to picture box html - html

Question

I have a page where users can upload there pictures that will act as their profile pictures. I imported it using this code in php and html:
$data = mysqli_fetch_assoc;
$image = $data['image'];
and the html
<img src = "./imgs/<?php echo $image; ?>" style = "height:200px; width:200px;>
the only problem is that, some pictures who are not actually a "square-in-size" will look greatly stretched in the image box. How can I make the image box displays the original "orientation" of the image for example, when showing a 5x10 image (100px x 200px), how can I not make it automatically stretch to a 10x10 orientation?

Answer 1

You've used inline styles to explicitly set the height and width of the image to 200px.
I would suggest you let the browser calculate the height automatically for you and only set the width to 200px (this will make the height auto).
If you want to maintain a square image without stretching / squishing the image, you should use a container with a background image, something like this:
HTML:
<div class="profile-image"></div>
CSS:
.profile-image {
background-image: url('image/url/image.png');
background-size: cover;
background-position: center;
}
Of course, you would do well to ensure some kind of standardisation between images, for example, by enforcing a max width, height or aspect ratio when the user uploads it.

Answer 2

You don't have to specify image size, so if you want all images take all the width you can just apply a width: 100% and dont specify height, it will be automaticly calculated

Answer 3

You are using the term "orientation" wrong. Orientation suggests either the picture is "landscape" (the x value is bigger than the y value), "portrait" (the y value of bigger than the x value) or square (where both axis are the same in size).
What you are looking for is a container for the image, which is always a square (1:1), and the image inside will not stretch.
You can achieve such behavior by applying the image as a background-image via CSS, and give it a background-size: cover. This will fit the image inside the container, cropping the extra pixels from either side.
HTML Example:
<div class="container"></div>
CSS:
.container {
width: 250px;
height: 250px;
background-image: url('/path-to-image/image.png');
background-size: cover;
}
You can set the CSS form the PHP code if imported inline inside a <style> element and use the $image variable that way:
<?php
$image = $data['image'];
?>
<style>
.container {
width: 250px;
height: 250px;
background-image: url('<?= $image ?>');
background-size: cover;
}
</style>