简单

Question

我正在使用Bootstrap，我想将一些照片放入我的div中，我希望它们的大小相同（＆＃34;标准化＆＃34;）。

如果他们太大（并且他们将永远）我想调整它们以适应我的div并在必要时裁剪。

目前她就是我的所作所为：

我试图在函数中改变jQuery中图像的样式：

•如果高度大于宽度，我将样式切换为最大宽度：100％和高度自动。

•如果宽度大于高度，则为反转。

但我还是jQuery的新手，我可能做错了什么;请有人点亮我的灯笼吗？

这是我的jQuery

$(document).ready(function(){
  photoResize();
  $(window).resize(function(){
    photoResize();
  });   
});

function photoResize(){
  image_w = $('img').width();
  image_h = $('img').height();

  if(image_h > image_w)
  {
    $('img').css("max-width","100%");
    $('img').height("auto");
  } 
  else if(image_w > image_h)
  {
    $('img').css("max-height","100%");
    $('img').width("auto");         
  } 
}

这是一个更好看的小提琴：https://jsfiddle.net/Baldrani/DTcHh/9801/

Answer 1

简单

我经常在我们用于画廊等的CMS中这样做。我使用的方法涉及一个名为imgLiquid.js的jQuery库。

这会将内嵌图像转换为父div上的背景图像。它很好，因为你可以达到你想要的效果。它将裁剪图像（因为它在技术上成为背景图像）并将long count2 = Convert.ToInt64(command.ExecuteScalar());和background-size: cover;应用为内联样式。

You can find the plugin here

要初始化您需要的插件：

background-position: center center;

间接费用

该插件非常小（大约约为5.106 KB），因此您无需担心为页面增加重量。它确实是我遇到的最简单的方法（使用从服务器端生成的缩略图 - 请参见底部的注释）。

Cue CSS

我对此进行了彻底的测试，发现它可以提供出色的效果。然后你可以问......我的父div会发生什么（从技术上讲，插件隐藏了img元素 - 因此意味着父元素不知道自己的高度）。

一种简单易用的方法：

$(".myele").imgLiquid();

这个CSS会让你的高度回到包裹元素。所以，如果你想要某些比例，你可以使用这个数学：

h / w * 100 =填充顶部的百分比。

Working Example

小记

从技术上讲，如果我有控件，我建议只使用缩略图。我假设您使用的某种系统技术上只能渲染图像的缩减版本？我使用这种方法的原因 - 并建议它 - 是我无法控制CMS，我假设您只是想管理正在生成的代码，因为它是＆＃39;未说明。

Answer 2

如果你想让你的图像大小相同，那么你不需要任何javascript或计算，为什么不在css中设置它？

.someUniqueContainer img{
  width:300px;
  height:300px; // or what ever height you want
}

我猜你实际上想要将所有图像裁剪为设定的宽度/高度。如果是这种情况，你需要一个服务器端脚本。

图像来自哪里？只编辑它们会更容易。如果他们来自用户，那么您将在文件上传时调整服务器上的大小/裁剪

Answer 3

您的代码中存在多个错误。请看这个jsfiddle，请参阅https://jsfiddle.net/DTcHh/9796/

<?= $form->field($modelChangePassword, 'CurrentPassword',
   ['enableAjaxValidation' => false])->textInput(['placeholder'=>Yii::t('frontend/changePassword','CurrentPasswordPlaceholderText')
    ])
    ?>

Answer 4

这样吗？虽然这是纯粹的CSS，但不包括jquery，可能不适合你的情况..

body {
margin-top:20px
}
.col-xs-3 {
margin: 5px 0;
width: 500px;
height:120px
}
.col-xs-3 > div {
width: 100%;
height: 120px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

JsFiddle

将图像标准化为div

4 个答案:

简单

间接费用

Cue CSS

小记