Does flex invalidate the default proportion of img?

encountered a problem today: when the parent element is set to flex:1, the default aspect ratio of the child element img will be invalidated. What is the reason for this? 

<div>
    <a href="">
             <img src="https://www.baidu.com/img/bd_logo1.png?qua=high&where=super">
          </a>
</div>

div {
    width: 100px;
    height: 100px;
    display: flex;
    background-color: -sharp007bfc;
}

div a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

div a img {
    vertical-align: middle;
    height: 10%;
}

clipboard.png

JSFiddle: https://jsfiddle.net/molvqing.

Css3
Feb.08,2022
It is not a fixed value when the width and height of elements in

flex layout is a percentage, so if only height is defined, width will use the original size of the image to determine the child elements under
flex layout. The default flex-shrink attribute is 1. If there is not enough space, This project will be scaled down because the width of the image itself is larger than that of the container.
you can try specifying the height of the image as a fixed value
https://developer.mozilla.org.

.

if you set flex:1 and height:10%, don't you artificially set the width and height? of course you deform

.

how about this
div {

width: 100px;
height: 100px;
position: relative;
background-color: -sharp007bfc;

}

div an img {

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
vertical-align: middle;
height: 10%;

}

Height is valid under

flex, so img is 10% of the parent window

Previous: WeChat Mini Programs, how to modify the data of properties

Next: How to set the default when selectisze.js uses addOption to create a new drop-down item Thank you

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu