响应图像裁剪

我一直在努力以裁剪下面768px宽度为屏幕尺寸的图像。图像应该从左侧和右侧同样裁剪。响应图像裁剪

这里是在全尺寸的图像的一个例子（该图像的尺寸是宽900px由250像素高。：

这里是我一直在试图创建一旦裁剪版本屏幕尺寸小于768宽在这个版本的图像是320像素宽，但它应该在768px开始种植。

这是我一直使用至今的HTML：

<div class="container"> 
    <div class="image-container"> 
     <img src="http://i.imgur.com/H7cpsLK.jpg" /> 
    </div> 
</div>

这里是CSS：

.container { 
    width: 1280px; 
    max-width: 100%; 
    min-width: 768px; 
} 

.image-container { 
    width:100%; 
} 

img { 
    max-width:100%; 
    height:auto; 
} 

@media only screen and (max-width:768px) { 
    .image-container {max-width:768px; overflow:hidden;} 
}

这是我一直在使用，试图营造这样一个小提琴：http://jsfiddle.net/QRLTd/

是否有可能从左边和右边都裁剪图像双方在同一时间？

来源

2013-03-25 Mdd

你希望它裁剪，或显示第二图像相反，对于较小的分辨率？ – ninMonkey 2013-03-25 16:57:03

显示一个较小的图像也可以工作，我认为。 – Mdd 2013-03-25 17:19:34

LIVE DEMO

HTML：

<div class="container"> 
    <div class="image-container"></div> 
</div>

CSS：

.container { 
    width: 100%; 
    height:200px; 
} 

.image-container { 
    position:relative; 
    margin:0 auto; 
    background:url(http://i.imgur.com/H7cpsLK.jpg) no-repeat center center; 
    background-size:cover; 
    max-width:768px; 
    width:100%; 
    height:100%; 
}

来源

2013-03-25 16:30:26

你总是可以绝对位置的一些div在左侧和右侧具有较高的z-index值。

我还没有用过或看过任何图像通过CSS裁剪，但你肯定可以在油漆或Photoshop中裁剪图像，上传两个图像，然后换出你想用CSS显示的图像，并可能利用媒体查询。

来源

2013-03-25 16:30:15

与艺术方向（选择性裁剪/缩放）响应图像是一个棘手的区域。幸运的是，你只是试图朝着中心这一点更容易一点。 Roko的解决方案似乎适用于css，但您仍在加载完整大小的图像（较慢）。

如果你想进一步优化和提高你的速度，你应该加载不同大小的图像，使得移动浏览器不必下载桌面尺寸或更糟的是，Retina显示屏大小，图像。常见的解决办法是使用媒体查询断点和CSS3换出你的img.src，并有准备去图像的预裁剪的版本。

或者，你可以使用服务，如Pixtulate在飞行中为每个访问者进行这种作物。这也可以让你通过预先设定的焦点裁剪中心，并且你的图像的大小将适合每个访客的屏幕。

来源

2014-02-28 20:44:28 user3366324

响应图像裁剪

回答

相关问题