【问题标题】:Dynamic image resize动态图像调整大小
【发布时间】:2013-04-26 13:29:15
【问题描述】:

我在 templatemonster 上看到了一个非常漂亮的主页,我试图让我的主页看起来很相似,但问题是主图像。它不会以相同的方式扩展,我不知道我应该搜索什么。我搜索了动态图片,但找不到任何东西。

带有图片脚本的网站:http://livedemo00.template-help.com/wt_43701/#!/pageSplash 尝试调整窗口大小,您会看到图像会缩小,并且图像的某些部分会移出窗口。

我正在处理的网站是: http://dq.se/formbar/ 主图像只有一个标签,即

width:100%;

请帮我找到一种方法,让我的 IMAGE 具有最小高度:500px;如果窗口变小,图像将被切掉。

/阿克塞尔

【问题讨论】:

  • 我没有看到任何收缩效果。但无论如何,你可以使用 Chrome 的 DevTool 或 Firefox 的 Firebug 扩展来检查页面并学习。
  • 您可以将其设置为背景图像并使用background-size: cover,如果必须是图像,则使用jQuery plugin。另外,检查你的控制台,你的代码返回一堆错误。

标签: css image dynamic resize


【解决方案1】:

如果你有 min-height:500px; 试试 overflow:hidden; 这将在缩小到 500 像素后隐藏你的图片的其余部分

小小提琴:here

【讨论】:

  • 是的,这可以工作,但图像现在将消失在右侧。我希望脸部和头发始终处于焦点位置。照片最多可以“剪”到她的鼻尖和头发的末端。尝试使用:'left:50%;'和marginleft:-50%;或类似的东西。
  • 那么我认为你应该用 jquery 来修复它。或者其他人需要知道 awnser mate
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-11-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-02-18
  • 2011-01-24
相关资源
最近更新 更多