在HTML5和css中调整和裁剪图像
我的要求-在HTML5和css中调整和裁剪图像,html,css,responsive-design,resize-crop,Html,Css,Responsive Design,Resize Crop,我的要求- 在div/canvas中显示一个随机图像 图像高度应调整为父级高度 图像宽度应按比例重新调整大小(与高度) 如果“图像宽度”大于“父宽度”,则从左侧和右侧平均剪切 我已经用java脚本实现了这一点。Jsfiddle在。您可以调整输出窗口的大小以查看其工作方式 然而,我觉得这样做很乏味,CSS和/或jQuery中有一些非常简单的东西。你能帮我用纯css(最好)吗 我也在这里附上java脚本- var strDataURI; // displayBackground(true); //
var strDataURI;
//
displayBackground(true);
//
window.onresize = function(event) {
displayBackground(false);
}
//
function displayBackground(bChangeImage)
{
//alert("displayBackground");
var appWidth = window.innerWidth;
var appHeight = window.innerHeight;
//
if (bChangeImage)
{
var suffix_array = ["_california","_easter","_eiffel","_hk","_taj"];
var ran = Math.floor((Math.random()*5)+1);
ran = ran - 1;
//ran = 3;
strDataURI = "http://minds-eye.info/TP_Test/TP"+suffix_array[ran]+".jpg";
}
//
var myCanvas = document.getElementById('canvas');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
ctx.canvas.width = appWidth;
ctx.canvas.height = appHeight;
//
var hFraction = appHeight / img.naturalHeight;
var displayWidth = img.naturalWidth*hFraction;
mrgLeft = (appWidth - displayWidth)/2;
mrgTop = (appHeight - img.naturalHeight)/2;
ctx.drawImage(img,mrgLeft,0, displayWidth, appHeight);
//blurMargin = 20;
//stackBlurCanvasRGB( "canvas", blurMargin, blurMargin, appWidth-blurMargin*2, appHeight-blurMargin*2, 6 );
};
img.src = strDataURI;
}
要使背景图像的高度始终保持为包含元素的100%,宽度自动缩放,保持比例,只需将背景大小设置为“自动100%”,以便将宽度设置为自动,高度设置为100%。宽度将按比例缩放,而高度始终保持在包含元素高度的100% 定心提供左右自动裁剪 HTML:
查看我的jsBiin演示。更改CSS中容器的高度,以查看图像自动按比例缩放。这应该可以做到: HTML:
您的示例仅显示调整大小。如果你看到我的问题(第4点)和/或玩我的提琴示例,你会看到我试图实现的目标。我添加了背景居中,可以进行左右裁剪。我认为,除非我遗漏了什么,否则这将获得与JSFIDLE相同的结果。
<div class="container">
</div>
.container {
background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQWamCIidr9XrdW7BqKL5DXbqqQxlL8z43Imawqvi5esIqNe7Uh);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
height: 300px;
}
<div id="canvasHolder">
</div>
#canvasHolder{
background: white url(http://placekitten.com/400/700) no-repeat center center;
background-size: auto 100% ;
height:100%;
width:100%;
}