强制显示内联响应图像

我需要显示图像5x3的网格。无论屏幕分辨率如何，此网格都需要保持相同的格式和大小。图像本身将作出响应调整。强制显示内联响应图像

我有这样显示在inline-block的图像列表：

<div class="gridView"> 
    <ul> 
    <li> 
     <img src=""> 
    </li> 

    <li> 
     <img src=""> 
    </li> 

    <li> 
     <img src=""> 
    </li> 
    </ul> 
</div>

的CSS是这样的：

.gridView { 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 1200px; 
    text-align: center; 
    width: 100%; 
} 

.gridView ul li { 
    height: 100%; 
    max-height: 150px; 
    max-width: 200px; 
    width: 100%; 
}

现在当我调整电网没有按窗口”保持它的大小不变。如何确保网格保持不变，但只有图像自身调整大小？

来源

2013-02-11 user2028856

为什么它不起作用，因为'width：100％'可以适用于小于1200px的任何尺寸，因此当宽度小于1200px时它会继续调整尺寸。如果你想让它保持静态，那么使它成为'width：1200px;'并且摆脱'max-width'。 – KBN 2013-02-11 14:08:07

如果你想保持的布局结构相同，如：

[x] [x] [x] [x] [x] 

[x] [x] [x] [x] [x] 

[x] [x] [x] [x] [x]

然后，你将不需要液体电网系统，但液体的图像，而不是。我会做的是以下内容：更改.gridView ul li样式，以便代替最大高度和宽度，设置简单的高度和宽度声明。

.gridView ul li { 
height: 150px; 
width: 200px; 
}

然后添加图像类，使图像响应：

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

当然，图像文件大小应为150像素X 200像素他们最大。

这样，当您的浏览器宽度变小并且图像将变小以适应网格时，您的网格不会折叠。

希望这会有所帮助！

来源

2013-02-11 14:15:43

事情是，当我分配宽度：1200px到我的容器，调整窗口的大小时，网格变得黯然失色，图像不会自行调整大小。 – user2028856 2013-02-11 14:18:27

我们来创建一个jFiddle。发布你现在的代码。我们将显示颜色块，而不是图像。你会看到的。 – 2013-02-11 14:19:48

嗯，你的意思是现在的代码发布到jfiddle？图像是通过WordPress的动态生成，如果我只复制它的一部分，它不会加载图像 – user2028856 2013-02-11 14:22:45

宽度：100％;将总是改变元素相对于父元素/窗口的大小。对于固定宽度，您需要固定宽度。就这么简单像：

width: 1200px;

来源

2013-02-11 14:13:52 AnilkaBobo

事情是，当我分配宽度：1200px时，调整窗口大小时，网格会变得黯然失色，图像不会自行调整大小。 – user2028856 2013-02-11 14:17:23

很难想象你的意思，但我认为，图像不会自动调整大小，因为元素只能相对于父元素调整大小。只要您的一些父元素将被修复，一切都将被修复。至少用CSS只是。 JS也许可以处理它 – AnilkaBobo 2013-02-11 14:28:41

这不是resize部分，不适合我，图像调整大小很好。但是，它是有问题的父容器。我应该改变这个问题，容器不会强制保持相同的布局。而不是保持5x3，然后强制图像调整大小，布局变为4x5，然后3x6等，直到它的1x7。我需要它保持5x3所有的方式 – user2028856 2013-02-11 14:42:01

强制显示内联响应图像

回答

相关问题