如何制作响应式图片

-5

我想在此模板上制作响应式图片： http://livedemo00.template-help.com/wt_57569/ 当您缩小页面时，图片会随之缩放。（如果我不明显，我正在谈论与管道的那个。）如何制作响应式图片

感谢您的帮助。

来源

2016-03-01 Yoplenk

你应该具体解释一下，究竟是什么阻止了你至少从自己尝试这一点。 – csmckelvey

我不是网站（网站）的开发者，但是不应该忽略缩放一般？由于它是一个依赖于浏览器的功能？ – Neijwiert

你的问题还不清楚，你的意思是如何确保图片与视口的比例？即当浏览器窗口缩小时，图片也是如此？ – Hektor

在你提供的例子，好像背景图像。所以，你可以风格它像下面

background-image: url("../images/image_name.jpg"); 
background-size: cover;

来源

2016-03-01 12:47:04

添加到您的CSS：

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

来源

2016-03-01 12:38:31

不应该是'img.responsive'，没有任何空格？ –

正如我需要一个可调整大小的“格”的背景示例页面上看到。示例代码：（改变图像的URL到你）

<!DOCTYPE html> 
<html> 
<body> 
    <div class="bg"> 
    <h2>Title</h2> 
    <p>Text</p> 
    </div> 
</body> 
<style> 
    .bg{ 
     background-image: url("83741.jpg"); 
     background-repeat: no-repeat; 
     background-size:100%; 
     width:100%; 
     height:300px; 
    } 
</style> 
</html>

随着“宽度：100％”你做的div始终适应页面的宽度在这种情况下（不完全，您应该设置页边距为零以达到完美契合）。在“背景大小：100％”的情况下，您可以创建一个“响应式”背景，并且高度应该固定，正如我们在您给出的示例中所看到的。

来源

2016-03-01 12:48:28 NeuDav

如何制作响应式图片

回答

相关问题