诀窍是将图像放入包含块元素,例如DIV.一旦将图像的宽度设置为100%,这将指示浏览器使图像宽度与DIV的左右边缘齐平.
然后,您通过CSS控制DIV的宽度,我发现将图像保留在块元素中可以在创建流体布局时更轻松地进行操作.
例:
img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container,hence the image*/
}
如果要以任何方式剪切/裁剪图像,请将其设置为大于其父级,并将父级的溢出css设置为隐藏.
例:
img.clipped {
width: 150%; /*Scales image to 150% width of parent container*/
float: left; /*Floats image to left of container - clipping right hand side*/
float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
width: 33%; /*Use this to control width of the parent container,hence the image*/
overflow: hidden;
}
希望这可以帮助…