将图像标准化为div [英] Standardize image into div

问题描述

我正在使用Bootstrap，我想把一些照片放到我的div，我想让它们都是相同的大小（标准化）。

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

现在她是我做的：

在一个函数中改变jQuery中图像的样式：

•如果高度大于宽度，我将样式切换到max-width： 100％和高度自动。

•宽度大于高度时取反。

b

但我还是新的jQuery，我可能做错了一些事情;

 
 >  $（document）.ready（function（）{
 photoResize（）; 
 $（window）.resize（function（）{
 photoResize b $ b}）; 
}）; 
 
 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）; 
} 
} 
  

这里是一个更好的视图的小提琴： a href =https://jsfiddle.net/Baldrani/DTcHh/9801/ =nofollow> https://jsfiddle.net/Baldrani/DTcHh/9801/

解决方案

简单

我在工作中经常使用画廊等。我使用的方法涉及一个名为imgLiquid.js的jQuery库。

这会将内联图片转换为父div的背景图片。它是好的，因为你可以实现你想要的效果。它将裁剪图像（因为它在技术上成为一个背景图像），并将应用 background-size：cover; 和 background-position：center center; 作为内联样式。

您可以在这里找到插件

p>

要初始化您只需要的插件：

  $ ）.imgLiquid（）; 
  

开销

（大约5.106 KB），因此您不必担心为页面添加权重。它真的是我遇到的最简单的方法（酒吧使用从服务器端生成的缩略图 - 请参见底部的注释）。

Cue CSS

我已经彻底测试过，发现它给出了很好的结果。然后你可以问...我的父div发生了什么（从技术上来说，插件隐藏了img元素 - 因此这意味着父元素不知道自己的高度）。

一种简单的方法可以让事情做出响应：

  .myelement：before {
 content：; 
 padding-top：50％; 
 display：block; 
} 
  

这个CSS会将你的高度回到包装元素。所以如果你想要一定的比例，你可以使用这个数学：

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

工作示例

小笔记

技术上如果我有控件，我建议只使用缩略图..我假设你使用某种系统这可能技术上只是渲染图像的缩小版本？我使用这种方法的原因 - 并建议它是，我不能控制CMS，我假设你只是想管理生成的代码，因为它没有说明。

I'm working with Bootstrap and I want to put some photos into my div and I want them to be all at the same size ("standardize").

If they're too big (and they will always be) I want to resize them to fit in my div and crop them if necessary.

For the moment her is what I do :

I've tried to change the style of the image in jQuery in a function:

• If the height is bigger than the width, I switch the style to max-width:100% and height auto.

• Inversement if the width is bigger than the height.

But I'm still new to jQuery and I am probably doing something wrong; can someone light my lantern please?

Here is my 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");         
  } 
}

And here is a Fiddle for a better view : https://jsfiddle.net/Baldrani/DTcHh/9801/

解决方案

Simplicity

I do this quite often in the CMS we use at work for galleries etc. The method I use involves a jQuery library called imgLiquid.js.

This will turn an inline image into a background image on the parent div. It's good because you can achieve your desired effect. It will crop the image (as it technically becomes a background image) and will apply background-size: cover; and background-position: center center; as inline styles.

You can find the plugin here

To initialize the plugin you just need:

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

Overheads

The plugin is very small (roughly around 5.106 KB) so you don't need to worry about adding weight to the page. It really it the most simple method I've come across (bar using thumbnails generated from the sever-side - see note at the bottom).

Cue CSS

I've tested this thoroughly and found it gives excellent results. You may then ask... what happens to my parent divs (as technically the plugin hides the img element - which therefore means the parent element doesn't know what height to make itself).

An easy method to make things work responsively, or not:

.myelement:before{
    content: "";
    padding-top: 50%;
    display: block;
}

This CSS will give your heights back to the wrapping element. So if you wanted certain proportions you could use this math:

h / w * 100 = your percentage for the padding-top.

Working Example

Small note

Technically if I had the control I'd advise just using thumbnails.. I assume you're using some sort of system that could technically just render cut down versions of the images? The reason I use this method — and suggested it — is that I don't have control over the CMS and I'm assuming you just want to manage the code that's being produced as it's not stated.

这篇关于将图像标准化为div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！