English 中文(简体)
如果我有一幅画面的画面,那么我怎么说只显示某种形象?
原标题:If I have an image with a div wrapped around it, how do I make it only show a certain section of the image?
  • 时间:2010-07-27 03:26:13
  •  标签:
  • html
  • css

如果我有一幅画面的画面,那么我怎么说只显示某种形象?

<div id=#container"><img src="hello.jpg" /></div>

让我说,我只想显示200px的宽度和200px的高度。 我也希望它从顶头10个餐厅和30个餐厅到左边。

最佳回答

如果您的<代码><div id=“#container”>被绝对定位,你可使用记号财产:

#container {
    /* top, right, bottom and left points of the rectangle */
    clip: rect(10px, 230px, 210px, 30px);
}

以上将产生一个直径10px和左侧30px的直径。 其底层右上角为210px,左侧为230px(给你200px的宽度和高度)。

http://www.ibloomstudios.com/articles/misunderstood_css_clip/"rel=“nofollow noretinger”in this article

问题回答

您可以把它作为四肢的背景情况,使其成为一只 set/eight的 block块;利用背景定位来取得你想要的立场。

#container {
    width: 200px;
    height: 200px;
    overflow: hidden
}
#container img {
    margin: -10px 0 0 -30px
}
#container {
    padding-top  : 10px;
    padding-left : 30px;

}
#container img {
    width        : 200px;
    height       : 200px;
}

图像::

#container img {
    max-width    : 200px;
    max-height   : 200px;
}




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签