When making a Web page, there is often a situation where we need to put a picture of an unknown size in a fixed-width container, at which point we need to consider the question:
Only one of the width or height settings for a picture can be scaled like a picture, but the picture may exceed the container size.
Setting a fixed width to a picture can cause a picture to deform.
Some people might simply use JavaScript to solve:
But in this kind of writing in the picture long wide gap is still a picture distortion of the situation, optimized the scaling algorithm code as follows:
Without considering IE6, you can use CSS directly, and you don't need to use a low performance CSS expression:
<!doctype html>
<meta charset= "UTF-8" >
< title> Pure CSS no expression implementation picture scaling </title>
<style>
. box{
width:300px;
height:300px;
Text-align:center;
border:1px solid #ccc;
}
. Box img{
max-width:100%;
max-height:100%;
Width:auto;
Height:auto;
}
</style>
<body>
<div class= "box" ></div>
</body>
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
