CSS响应图像 [英] Responsive Images with CSS

问题描述

我正在开发一个php应用程式，以自动将网站转换为回应版本。我有点困在图像上。

我已经成功地添加了一个包装类到网站上的每个图像，可以重新调整图像的大小。 / p>

我的问题在于自然比窗口小的图像，例如徽标和图标。我不想调整这些大小。

我的代码目前正在转换：

 < img src =[src]/> 
  

into：

 < div class =erb-image-wrapper> 
< img src =[src]/> 
< / div> 
  

我使用以下CSS：

  .erb-image-wrapper {
 max-width：90％; 
 height：auto; 
 position：relative; 
 display：block; 
 margin：0 auto; 
} 
 .erb-image-wrapper img {
 width：100％！important; 
 height：100％！important; 
 display：block; 
} 
  

这会调整所有图片的大小，但我只想调整图片大小页面的宽度。

解决方案

  .erb-image- wrapper img {
 max-width：100％！important; 
 height：auto; 
 display：block; 
} 
  

为我工作。

感谢MrMisterMan

I'm finding it tricky to resize images to make them responsive.

I'm developing a php application to automatically convert a website to a responsive version. I'm a little stuck on the images.

I've successfully added a wrapper class to every image on a website and can re-size the images quite well.

My issue lies with images that are naturally smaller than the the window, such as logos and icons. I don't want to resize these.

My code currently converts:

<img src="[src]" />

into:

<div class="erb-image-wrapper">
    <img src="[src]" />
</div>

Where I use the following CSS:

.erb-image-wrapper{
    max-width:90%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
}
.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

This resizes all images, but I only want it to resize images that are over the width of the page. Is the a way I can achieve this via CSS?

解决方案

.erb-image-wrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
}

Worked for me.
Thanks for MrMisterMan for his assistance.

这篇关于CSS响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！