Default Dimension of <img> and Absolute Positioning Problem

Hi all, I plan to produce a website that contains over thousand img tag .

  • All img tag have same “position and zoom”.
  • Each image have unique dimension.
  • “left” and “top” must be defined on each img tag.

The Mozilla state that img tag’s default dimensions are defined by the embedded image’s intrinsic values

So, could I omit to set width and height to CSS? It is painful to set them over thousand time…

Surely I have tried to left width and height blank in the css file and the page running well as same as dimensions specified.

I am just wondering if there are any hidden problem on it.

common:

img{
   position: absolute;
  zoom: 0.8;
  -ms-zoom: 0.8;
  -webkit-zoom: 0.8;
  -moz-transform: scale(0.8,0.8);
}

original:

#img_1{
 width: 535px;
 height: 430px;
 left: -30px;
 top: 365px;
}

plan to:

#img_1{
 left: -30px; 
 top: 365px;
}

Thanks for your remind. I will add -ms-zoom, -webkit-zoom and -moz-transform later.

As @randelldawsonsays, zoom just flat out doesn’t work in some browsers - it’s a thing specific to very old versions of Internet Explorer that a few other browsers chose to support.

Need a bit more context though, are you really trying to absolutely position a thousand-odd images of different sizes by hand on a web page? It’s incredibly unlikely that you actually need to do this by hand, it’s sounds very much like you’re doing something very wrong here, but just need a bit more info as to what your expected result is

@DanCouper @camperextraordinaire
Thanks all. I just check out Mozilla also suggest not use “zoom” as it is Non-standard.

More info about why I do below:

  • The thousand-odd images would be used on a collection of web pages.
  • A scalable div container is embed on each page, which contains absolutely position images.
  • The HTML structure of the mentioned pages would be this:
    QQ20180924-164602%402x

This is NOT a responsive website, the content must be look exactly the same on different resolution. The only different is scale rate.

Why are you scaling the images?

This is not a reason to use absolute positioning. You’re laying out the images next to each other, so why are you not just putting the images in the div? I can’t see what absolute positioning is giving you here, you still need to explain this a bit more because at the minute what you’re trying to do seems crazy

@camperextraordinaire @DanCouper

Thanks for comments. Let me explain more about why use absolute positioning.
The UI design is complexity like the above graphic. Div tag and Img tag were distributed to specified position on the screen. Thus it is not easy to apply Flexbox or a bootstrap solution.

The main 1024 X 768 div would be scaled to fit different resolution to provide exactly same content to user on both iPad and desktop browser.

So should I use absolute positioning to those div tag and img tag?

Why not trying to use grid. it seems more appropriate for your layout.

@sorinr
Thanks for comment. Is it possible to use grid to produce a user interface like this one? May I know if there are any examples?

My suggestion was based on Default Dimension of <img> and Absolute Positioning Problem

Why do you need 1000 odd images in specific positions?
Why can’t you just make one big image? ie the wireframe doesn’t actually tell me anything useful: what is the actual reason for placing so many images? Are the images different sizes? Does each individual image have a specific position on a specific page?

You seem to be trying to create the equivalent of multiple print books, and a. that’s a massive job for print, where you have software designed to do that, and b. that’s only really works for print, not web. You can do what you want to do, but it’ll take you weeks of work to get it right, and it’ll be completely inflexible, so if you get one thing wrong you may have to rejig entire pages.

If this is what youre trying to do, you definitely don’t need to absolutely position anything. What @sorinr says, using CSS grid, is probably the easiest way