Question

我有两个小组的网站

一个是左侧面板，其中菜单（左面板尺寸为370px）

和

一个是右面板，其中带有填充的内容（主要是图像）留下370px

右侧面板中的

我想在该部分显示完整图像

现在我正在使用jquery设置图像高度＆amp; doc准备就绪的宽度。但它的所有图像都延伸了。

所以如何使用裁剪和纵横比设置所有图像而不拉伸。

这是我的js代码，现在已准备好doc

jQuery(document).ready(function(){
    var windowWidth = $(window).width(); //retrieve current window width
    var windowHeight = $(window).height(); //retrieve current window height
    var finalWidth = windowWidth - 370;
    jQuery('.rightside > img').css({'height':windowHeight,'width':finalWidth});
    jQuery('.rightside').css('height',windowHeight);
});

html结构

<div class="rightside"> 
    <img class="project_image" src="" />
    <img class="project_image" src="" />
    <img class="project_image" src="" />
    <img class="project_image" src="" />
    <img class="project_image" src="" />
</div>

现在我正在使用1920 * 1080分辨率

我正在获得右侧面板当前宽度＆amp;身高1533 * 924

Answer 1

听起来你可以用纯css解决这个问题 - 不需要脚本。主要技巧是使用div background-image样式和background-size: cover。这会处理裁剪和调整大小（无论视口大小）并保持纵横比。

如果没有看到更多代码，我无法提供有保障的解决方案。但是，如果你已经拥有了正确的面板＆＃34;填充整个视口高度，然后以下工作：

<style>
    .image-container {
        height: 100%;
        background-size: cover;
        background-position: center;
    }
</style>

<div class="right-panel">
    <div class="image-container" style="background-image: url('/some/image.png');"></div>
</div>

请注意，background-image样式会添加到html中，而不是样式中 - 这样您就可以在许多不同的图像上重复使用此类。

Answer 2

您可以使用以下步骤并链接：

https://github.com/josefrichter/resize/blob/master/public/preprocess.js
使用文件数据创建e Blob，并使用window.URL.createObjectURL(blob)
将新的隐藏输入附加到原始表单，并将dataURI图像基本上作为普通文本传输
在后端，读取dataURI，从Base64解码并保存

如何裁剪图像并使用jquery设置纵横比？

2 个答案: