缩放图像与CSS但限制到原始大小 [英] Scale image with CSS but limit to orignial size

问题描述

对于响应式设计，我想缩小一些图片：

  img {
 width：100 ％; 
 height：auto; 
} 
  

这样可以正常工作，但如果屏幕宽度超过原始大小

有没有办法限制这种缩放到原来的大小？

Willem

解决方案

您可以使用 max-width 来防止图片宽度变大

  img {
 width：auto; 
 max-width：100％; 
 height：auto; 
} 
  

For a responsive design, i would like to scale down some images:

img {
    width:100%;
    height:auto;
}

This works as expected, but if the width of the screen exceeds the original size of the image, it blows up the image.

Is there a way to limit this scaling to its original size? So that it only gets smaller if necessary?

Thanks in advance for your answer.

Willem

解决方案

You could use max-width to prevent image width from becoming larger than original size.

img {
    width: auto;
    max-width: 100%;
    height: auto;
}

这篇关于缩放图像与CSS但限制到原始大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！