如何仅使用css缩放图像块？

这是3个内联块。第一个是可扩展的，右边的两个块有固定的宽度。如果我们调整浏览器的权限，无论如何应该是可见的。 #blockID应该适合页面，同时如果我们调整了窗口大小，图像应该是可扩展的。如何仅使用css缩放图像块？

我想在第一个块的图像可缩放。

我发现了几种使用JS的方法，但由于离散性，JS不适合。有没有一些技巧只使用CSS？

<div style="width: 100%; height: 300px; white-space: nowrap;" id="blockID"> 

     <div style="max-width: 640;"> 
      <div style="display: inline-block; height: 300px; max-width: 300px; width: 100%; background: #ffff00; position: relative; overflow: hidden;" id="pano"> 
       <img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/> 
      </div> 

      <div style="display: inline-block; height: 300px; width: 640px; background: #000;"> 

      </div> 

      <div style="display: inline-block; height: 300px; width: 60px; background: #ff7870;"> 

      </div> 
     </div> 
    </div>

更新1： 我已经改变了草书文字

更新2： 我可以使用表CSS实现这种效果。但桌子不好。 http://jsfiddle.net/6ng62eb7/4/

来源

2015-05-04 AnthonyK

“*第一个是可扩展的，左边的一个是固定*”，第一个**是左边的......你可能是说右边的两个是固定的......？请澄清。 – LinkinTED

这里“左”是一个动词 - “过去”。 – AnthonyK

你能解释一下好吗？你想要对图像进行缩放比例？使足够大的3行内嵌块填充窗口宽度，无论它有多大，还是别的什么？ –

尝试组合显示块和内嵌块，如下所示：

<div style="width: 100%; height: 300px; white-space: nowrap;"> 
    <div style="width: 100%; min-width: 641px; "> 
     <div style="display: table-cell; width: 30%; height: 286px; background: #ffff00; max-width: 350px; vertical-align: top;" id="pano"> 
      <img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" max-width: 90%; margin: 5%; " /> 
     </div> 

     <div style="display: table-cell; width: 70%; min-width: 641px;"> 

      <div style="display: inline-block; width: 641px; height: 286px; background: #000;" id="content"> 

      </div> 

      <div style="display: inline-block; width: 60px; height: 286px; background: #0044ff;" id="basket"> 

      </div> 
     </div> 
    </div> 
</div>

http://jsfiddle.net/rfh8dgqu/

我不知道跨浏览器兼容，但它在Chrome浏览器的

来源

2015-05-04 12:47:56 Anthony

它不会在IE7中工作。表格单元格不支持那里。 – AnthonyK

尝试给图像只有100％的最大宽度。

因此改变：

<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/>

到：

<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style="max-width: 100%;"/>

Updated Fiddle

来源

2015-05-04 08:36:57 LinkinTED

在这种情况下，它可以扩展后右块已经超出浏览器。正确的块应该是可见的 – AnthonyK

你需要给图像max-width: 100%。这将缩放与容器相关的图像。然后你需要缩放图像所在的容器。现在你已经为父div设置了<div style="max-width: 300px; width: 100%;" id="pano">，所以img里面最多只能达到300px。

您还可以将总容器设置为<div style="max-width: 640px;">，这意味着所有3个元素在一起永远不会大于640像素。

这就是为什么当你缩小浏览器窗口时，你只能看到你的图像缩放。底线是，你必须使整个元素（包括它的容器响应或这不会工作） - 当定义盒子大小时，你必须使用％而不是px，em ...。这也意味着你想保持在右边的其他两个元素必须在％（并且全部3需要加起来高达100％）。

来源

2015-05-04 08:58:19

是的，你是对的 - 我所有3个元素在一起永远不会超过640px。主要目的是隐藏图像，如果我们有小窗口（小于900px），同时图像应该大于300px，但可以是200px或100px的宽度。 – AnthonyK

为此，您需要一些称为媒体查询的内容。通常你会写'@media screen和（min-width：900px）{body {background-color：＃000; }}'到你的css文件中（如果屏幕大于900px，则将主体背景改为黑色）。 –

我更新了帖子。有我需要的一个例子效果。我可以使用表格单元格\t css，但它在ie7中不起作用。 – AnthonyK

如何仅使用css缩放图像块？

回答

相关问题