HTML/CSS 调整大小答案

【问题标题】：HTML/CSS Resize DelemaHTML/CSS 调整大小
【发布时间】：2013-11-16 16:29:30
【问题描述】：

我正在为社区课堂上的一个黑色星期五项目制作模型网页。

我以为一切都很好，直到我意识到对于任何小于 1920x1080 的屏幕来说，图像都太大了。有没有办法让图像在我的 div 中重新调整大小？我可能没有正确解释这一点，所以我让屏幕截图和代码自己说话。

*I need code for jfiddle*

这是我带注释的屏幕截图：http://i.imgur.com/2jLZbov.png

谢谢，如果我在帖子中违反了某种隐藏规则或某些东西，我很抱歉，我是该网站的新手，之前只发过一次。

【问题讨论】：

在你的问题中添加一些真实的代码，而不是一些伪代码只是为了满足要求。它的存在是有原因的。

标签： html css css-animations

【解决方案1】：

您需要先从父容器中删除大小#cf，并将位置规则更改为static 或relative。然后，给#cf img 选择器一个width:100% 规则。

演示：http://jsfiddle.net/Eb9mJ/1/

CSS：

#cf {
  position: relative; /* CHANGED FROM ABSOLUTE */
}

#cf img {
  position:absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  width: 100%; /*ADD THIS WIDTH SO IT ALWAYS STRETCHES TO THE SIZE OF THE VIEWPORT*/
}

【讨论】：

【解决方案2】：

查看我制作的这个示例：

JS Fiddle Here

它在加载和调整大小时抓取用户的屏幕大小，然后调整背景的大小以适应屏幕。

$(document).ready(function () {
    $('html').css({
        "background-size": $(window).width() + "px" + " " + $(window).height() + "px"
    });
    $('html').show();
});

$(window).resize(function () {
    $('html').css({
        "background-size": $(window).width() + "px" + " " + $(window).height() + "px"
    });
});

【讨论】：

【解决方案3】：

试试这个http://www.w3schools.com/cssref/css3_pr_background-size.asp

背景尺寸 - CSS 属性

【讨论】：

【解决方案4】：

您可以在 css 中定位该图像并根据需要设置宽度或高度。我改变了你的小提琴http://jsfiddle.net/Eb9mJ/

添加这些 css（大小仅用于演示目的）

img.top{
    height:100px;
}
img.bottom{
    height:200px;
}

【讨论】：