如何让图片宽度不变，高度自动变化，保持原图宽高比不变？

要让图片宽度不变，高度自动变化，同时保持原图的宽高比不变，你可以通过CSS样式来实现。这通常涉及到设置图片的宽度为固定值，并允许其高度根据容器的宽度和原图的宽高比自动调整。下面是一个具体的实现方法：

HTML

<img src="your-image-url.jpg" alt="示例图片" class="responsive-image">

CSS

.responsive-image {  
    width: 100%; /* 或者设置为具体的宽度值，如 300px */  
    height: auto; /* 高度自动调整 */  
    /* 可选：如果你需要图片居中显示，并且不希望图片超过其父容器的大小，可以添加以下样式 */  
    max-width: 100%; /* 防止图片宽度超过其容器 */  
    display: block; /* 移除图片底部默认的空间 */  
    margin: 0 auto; /* 居中图片（如果容器宽度大于图片宽度）*/  
}

在这个例子中，.responsive-image 类被用来设置图片的样式。通过设置 width: 100%（或者任何你想要的固定宽度值），图片的宽度会被设置为容器宽度的100%（或者固定值），而 height: auto 则确保图片的高度会根据图片的原始宽高比自动调整。

max-width: 100% 是一个额外的安全措施，用来防止图片（如果其原始尺寸大于容器）被放大到超出其容器的宽度。这对于响应式设计特别有用，因为你可以确保图片在不同屏幕尺寸下都能以适当的尺寸显示。

display: block; 和 margin: 0 auto; 是可选的，它们用于将图片作为块级元素显示，并使其在其父容器中水平居中（如果容器的宽度大于图片的宽度）。如果你的布局不需要这些特性，可以省略这些样式。