0

I have 3 images: 1- 320 x 420 2- 600 x 450 3- 695 x 355

How can I with css and html to have for all three images the dimension 260 x 260? I don't want cut the images, I want keep their original proportions. Thanks for your help

ulisse0744
  • 21
  • 1
  • 7
  • Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Lazar Momcilovic Aug 30 '19 at 18:02
  • for example this web site how keep the proportions? http://www.tozainetwork.net/brainstorming/index.php/it/donna/borse – ulisse0744 Aug 30 '19 at 18:23
  • FFS open the dev console and you'll see that those are all thumbnails with the same size of 260 by 260 pixels. It's a Joomla site so all thumbs are automatically created as you can do in WP or any other CMS. – Lazar Momcilovic Aug 30 '19 at 18:39
  • I want to use a different image if the proportion of the container is either vertical or horizontal. I have two versions of the same logo —vertical and horizontal— the idea here is to make better use of the available space. – ganar Jan 10 '23 at 19:09

2 Answers2

2

object-fit is made for this, it will keep proportion and can also clip your image the way you want:

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

syntax values : fill | contain | cover | none | scale-down

You can alter the alignment of the replaced element's content object within the element's box using the object-position property. ex :

img[class] {
width:260px;
height:260px;
object-fit:cover;
}
img:nth-child(1) {
object-position: center top;
}
img:nth-child(3) {
object-position: right top;
}
<img class src=https://placeimg.com/320/420/animals>
<img class src=https://placeimg.com/600/450/animals>
<img class src=https://placeimg.com/695/355/animals>
<p>Original size</p>
<img  src=https://placeimg.com/320/420/animals>
<img  src=https://placeimg.com/600/450/animals>
<img  src=https://placeimg.com/695/355/animals>

If your images are only parts of the design, then background-image,background-size,background-position can do similar visual.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • `object fit` is not supported by IE so if you have anyone viewing your site on IE it will not work. You are better off using the `background-size` solution. – Connor Smyth Aug 30 '19 at 19:24
  • @ConnorSmyth if image are part of the content, they should not be used has backgrounds. For IE, you can wrap them and set overflow:hidden on the wrapper, margin or position can be used to decide how to clip them.- ie understands width/height/transform , there is many ways to keep image inside the document before using them as pieces of the design ;) - `clip : rect()` was a first attempt for this kind of styling to resize an image without loosing proportion https://developer.mozilla.org/en-US/docs/Web/CSS/clip – G-Cyrillus Aug 30 '19 at 20:26
  • I want to use a different image if the proportion of the container is either vertical or horizontal. I have two versions of the same logo —vertical and horizontal— the idea here is to make better use of the available space. – ganar Jan 10 '23 at 19:06
1

Is this what you're looking for? It uses background-size:contain to automatically make sure the whole image fits, then background-position:center to center it in the div.

#image {
  border: 2px solid black;
  height:260px;
  width:260px;
  background: url("https://wallpapertag.com/wallpaper/full/0/6/3/49612-mountains-wallpaper-1920x1080-for-android-40.jpg");
  background-repeat: no-repeat;
  background-position: center; 
  background-size: contain;
<div id="image">
htmlcat
  • 336
  • 3
  • 10
  • I want to use a different image if the proportion of the container is either vertical or horizontal. I have two versions of the same logo —vertical and horizontal— the idea here is to make better use of the available space. – ganar Jan 10 '23 at 19:07
  • Hi, I suggest that you ask a new question about this, so other people who can answer will see it. – htmlcat Jan 11 '23 at 22:23