Home > Web Front-end > HTML Tutorial > Can div css achieve equal scaling of images_html/css_WEB-ITnose

Can div css achieve equal scaling of images_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:15:14
Original
1368 people have browsed it

Can div css achieve equal scaling of images? How to implement it specifically?


Reply to the discussion (solution)

No, it will only cut the picture (not to scale).
You can use JS to solve it. It is recommended to ask in the JS version.

Scale proportionally? Not arbitrary cropping? According to the proportion of the original body, you can set the height of the img and have fun!

It seems that some people are using js to modify the width and height of the image according to the scrolling of the mouse, but the effect is definitely not very good

Yes. Whether it is CSS or JS, as long as a fixed length or height is specified (choose one, but not both at the same time), it will automatically scale according to the original length and height ratio.

And you can also use relative sizes like percentages.

css uses % but there must be a maximum value to avoid distortion
The professional point is called fluid/elastic image Google's

zoom: 1 means no zoom, zoom: 0.8 means 80% reduction

Yes. Whether it is CSS or JS, as long as a fixed length or height is specified (choose one, but not both at the same time), it will automatically scale according to the original length and height ratio.
1
As long as the height and width are not defined at the same time, they can be scaled in equal proportions

As long as the width and height of the div are larger than the img to be changed, the size can be changed by changing the width and height of the img

The image has a max-width attribute. Try setting it to the width of the parent container div

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template