When we were in the Forum News system, some of the images would be big enough to break the overall layout of the beautiful, and now we use CSS to define the image for cropping and display, that is, when the image container is insufficient to display the entire image, the image is displayed in the upper left corner. If the container is insufficient, the image is hidden. Related colleagues also have this idea. The following CSS styles are available, so they can be shared with WEB developers!
Of course, some people use img's onload event to control its width and height in js. However, after recruitment, sometimes the webpage loading is too fast or too slow to execute. We recommend the following code to you, independent research.
| The code is as follows: | Copy code |
| <Html> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <Style type = "text/css"> . DivClass {height: 100%; width: 100%; overflow: hidden; Margin-bottom: 5px} </Style> <Title> COPY data to ID Group set by ID | Image CSS definition cropping display | auto-scaling of text width </title> </Head> <Body> <Div id = "airzen" class = "divClass"> </div> </Body> |
|
Note: You can customize the above style, but retain overflow: hidden. Have a good time!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
