网页图片自适应：在固定宽度容器中保持比例
在网页设计中，经常会遇到需要将图片适应固定宽度容器，同时保持图片比例不变的问题。尤其当图片原始宽度超过容器宽度时，如何避免图片变形是一个常见的挑战。本文将提供一种解决方案。
问题： 假设有一个宽度为50%的div容器，需要在其中显示一张宽度远大于容器宽度的图片，如何确保图片不失真，且高度自适应容器？
初始代码：
@@##@@
解决方案：
关键在于调整图片的CSS样式。通过设置width: auto; height: 100%;，可以实现图片高度自适应容器，同时宽度根据比例自动调整，从而避免变形。
修改后的代码：
@@##@@
解释：
-
width: auto;允许图片宽度根据其高度和比例自动调整。 -
height: 100%;使图片高度占据父容器的全部高度。
重要提示： 为了使图片高度自适应生效，父容器div的高度必须预先设定或由其内容决定。 在上面的例子中，我们为父容器添加了height: 200px;，您可以根据实际情况调整这个值。 如果父容器高度由内容决定，则图片高度会根据内容高度自动调整。 如果没有设置父容器高度，height: 100%; 将无效。
通过以上方法，您可以轻松解决图片在固定宽度容器内高度自适应且保持比例的问题，从而创建更美观的网页布局。
