Question

如何防止我的图像被自然200px宽度拉伸？

＆＃13;

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="narrow">
            <VisualState.StateTriggers>
                <triggers:CompositeStateTrigger Operator="And">
                    <mytrigger:AdaptiveTrigger MaxWindowWidth="520" MinWindowWidth="0" />
                    <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
                </triggers:CompositeStateTrigger>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="textBlock.Text" Value="Desktop is narrow" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="medium">
            <VisualState.StateTriggers>
                <triggers:CompositeStateTrigger Operator="And">
                    <mytrigger:AdaptiveTrigger MaxWindowWidth="1199" MinWindowWidth="521" />
                    <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
                </triggers:CompositeStateTrigger>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="textBlock.Text" Value="Desktop is medium width" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="wide">
            <VisualState.StateTriggers>
                <triggers:CompositeStateTrigger Operator="And">
                    <mytrigger:AdaptiveTrigger MinWindowWidth="1200" />
                    <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
                </triggers:CompositeStateTrigger>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="textBlock.Text" Value="Desktop is wide" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

＆＃13;

footer {
  display: flex;
}
img {
  flex: 1;
  margin: 1em;
}

＆＃13;

Answer 1

你可以将它扔进一个简单的容器中，然后用它进行弯曲：

<footer>
  <div>
    <img src=http://www.placebacon.net/200/150>
  </div>
</footer>

footer {
  display: flex;
}
div {
  flex: 1;
  margin: 1em;
}
img {
  max-width: 100%;
}

Answer 2

取下图像的弹性并将max-width设置为100％。这将允许图像增长到它的最大尺寸，并且如果它的父母缩小则缩小。然后将align-items：flex-start添加到容器中。如果纵横比缩小，这将允许纵横比保持不变。

＆＃13;

footer {
  display: flex;
  align-items: flex-start;
}
img {
  margin: 1em;
  max-width: 100%;
}

＆＃13;

<footer>
  <img src=http://www.placebacon.net/200/150>
</footer>

＆＃13;

如何使图像弯曲到它的宽度？

2 个答案: