窗口重新调整大小时(CSS)图像扭曲

时间:2018-06-04 02:16:29

标签: css resize image-scaling

所以我一直试图创建一个简单的页面,其中图像占据了100%的高度,并带有一个小侧边栏。我想在调整窗口大小时调整图像大小。当我垂直调整窗口大小时,宽度保持不变,这不是我想要的(我希望它保持它的纵横比,无论窗口大小如何)。我真的不喜欢这种扭曲,但我不确定如何修复它。知道我做错了吗?

.big-image {
    max-height: 100%;
    min-width: 20%;
    margin: auto;
    overflow: hidden;
}

3 个答案:

答案 0 :(得分:0)

您可以将图片的heightwidth设置为auto,并使用设置的大小控制其他属性,无论是百分比还是px。当您使用其他属性控制图像的大小时,auto应该保持图像的宽高比。

答案 1 :(得分:0)

max-width:100%height:auto将有效。当应用max-width:1000%;它将占用容器的宽度,高度将按比例变化。

答案 2 :(得分:0)

if (context.CanEvaluatePolicy(LAPolicy.DeviceOwnerAuthenticationWithBiometrics, out AuthError)){ var replyHandler = new LAContextReplyHandler((success, error) => { this.InvokeOnMainThread(()=> { if(success) { Console.WriteLine("You logged in!"); PerformSegue("AuthenticationSegue", this); } else { // Show fallback mechanism here } }); }); context.EvaluatePolicy(LAPolicy.DeviceOwnerAuthenticationWithBiometrics, myReason, replyHandler); }; display: block设置为display: inline-block课程,以便.big-imagemax-height属性生效。这些属性以及min-widthheightwidthmin-heightmax-widthpadding-toppadding-bottom和{{1 }}不适用于内联元素。