Webpage image deformation solution-fixed width and height auto-scale down CSSCode
Today, a customer said that the scale-down and big image of the website were somewhat distorted after the revision, So I analyzed the reasons. There are mainly the following problems:
1. The thumbnail deformation is because the ratio of the previously scaled aspect ratio is different from the ratio after the new version. Re-upload the thumbnail! It is too difficult.
As long as the image is scaled down proportionally, it will not be deformed. So I want to solve this problem with a fixed height, using JS or
ProgramImplementation is also very simple, basicAlgorithmYes: W1/H1 = W2/H2 requires that the H2 value be moved down a little and then H2 = W2 * (H1/W1)
If you are using a mobile system, you only need to set the width and height to 0 when calling the tag, for example, {$ productthumb (, 0 )}
2. The source image is deformed because it is processed in the CSS code. Previously, overfloat: hidden was used to prevent the layout of the image from damaging the Div. Later, the customer said
Fixed width. If the height is not set, it is displayed as the height of the original image. If the width and height are not scaled down proportionally, the data will be deformed. So I was wondering if CSS was used.
The code page can realize the maximum width of a fixed image, and the height is reduced by the width. I searched online and found some ideas. Finally, modify it to your desired
The CSS code is successfully tested. Now I want to share it with you.
The example below is fixed with the maximum width of 542px. You can modify it as needed!
Code on the HTML page:
<Div class = "article_content">
<A href = "http://www.wolishop.com/"> </a>
</Div>
CSS code:
. Article_content IMG {
Vertical-align: middle;
Max-width: 542px;
Height: expression_r (this. width> 542? (542 * (this. Height/This. width): True );
Width: expression_r (this. width> 542? 542: True );
}
Self-Test instance:
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Style type = "text/CSS">
. Article_content IMG {
Vertical-align: middle;
Max-width: 542px;
Height: expression_r (this. width> 542? (542 * (this. Height/This. width): True );
Width: expression_r (this. width> 542? 542: True );
}
</Style>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div class = "article_content">
<A href = "http://www.wolishop.com/"> </a>
<A href = "http://www.wolishop.com/"> </a>
</Div>
</Form>
</Body>
</Html>
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
