当图像比div宽时，如何使图像适合div元素？

I've an image tag inside a div element.

我在div元素中有一个图像标记。

<div id = "myDiv">
 <img alt = "myImage" src = "some_source"/>
</div>

The image is bigger than the div, so the image is not inside the div element. First, I've thought about using width = x, height = y. But as I'm still designing the page, I fear to have to worry all the time those 2 dimensions.

图像大于div,因此图像不在div元素内。首先,我考虑过使用width = x,height = y。但是,由于我仍在设计页面,我担心必须一直担心这两个方面。

How can I keep the image inside the div element? also, respecting the dimensions of the div element?

如何将图像保留在div元素中?还有,尊重div元素的维度?

Thanks for helping

谢谢你的帮助

4 个解决方案

#1

From here: Three ways to resize images to fit a DIV

从这里:三种调整图像大小以适应DIV的方法

Using the STYLE attribute within the IMG tag to manually set the width or height for each image (essentially the same as #1).

使用IMG标记中的STYLE属性手动设置每个图像的宽度或高度(与#1基本相同)。

<div id="img_box">
<img style="width: 100%;" src="path/to/horizontal_image.jpg" />
</div>
<div id="img_box">
<img style="height: 100%;" src="path/to/vertical_image.jpg" />
</div>

Hope it solves your problem.

希望它能解决你的问题。

Edit: Best solution is to actually resize the image with server-side script. Scaling images in the browser does not usually work out very well.

编辑:最佳解决方案是使用服务器端脚本实际调整图像大小。在浏览器中缩放图像通常不会很好。

Edit2: http://unstoppablerobotninja.com/entry/fluid-images

#2

This worked for me .

这对我有用。

 .myimg {width:200px; height:auto;}

Automatically re-sizes images in all browsers .

在所有浏览器中自动重新调整图像大小。

#3

Since this post is from a while ago, I figure I'd update it with a more modern way of doing this that requires no JS.

由于这篇文章是从不久前开始的,我想我会用更现代的方式更新它,不需要JS。

I'd recommend using the CSS properties background-size:cover and background-position: center to stretch, crop, and position the image (using background-image to set the image to the div).

我建议使用CSS属性background-size:cover和background-position:center来拉伸,裁剪和定位图像(使用background-image将图像设置为div)。

It will set the image to shrink or grow to fit the div entirely then crop off anything outside of the div. It is a great way to handle images of somewhat different shapes and sizes in a div.

它会将图像设置为缩小或增长以完全适合div,然后裁剪掉div之外的任何内容。这是在div中处理不同形状和大小的图像的好方法。

HTML

<div class="flexbox-container">
  <div class="filled-with-image"></div>
</div>

CSS

.flexbox-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: center;
}

.filled-with-image {
  width: 50%;
  height:400px;
  background-image: url(http://unsplash.it/1500/1000?image=875);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center bottom;
}

See the code here.

请参阅此处的代码。

#4

Guys after spending too much time looking around for an easier way to do this, I combine the info from research to do it like this: (simply using the getimagesize() function -if the height is larger than the width, echo an image tag with a style having a height of 100% else echo the same image tag but with a style having a width of 100%);

伙计们花了太多时间环顾四周寻找一种更简单的方法,我将研究中的信息结合起来就像这样:(只需使用getimagesize()函数 - 如果高度大于宽度,则回显图像标签高度为100%的样式,否则回显相同的图像标签但宽度为100%的样式;

$image = "path to your image";
$img_size = getimagesize($image);

if ($img_size[0] < $img_size[1]){echo " < img src= '$image'  style='height:100%;'>";}
else {echo "< img src= '$image'  style='width:100%;'>";}

#1