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

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

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

图像大于div，因此图像不在div元素内。首先，我考虑使用宽度=x，高度=y。但由于我仍在设计页面，我担心不得不一直担心这两个维度

如何将图像保存在div元素中？另外，关于div元素的尺寸

感谢您在此提供的帮助

：

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

希望它能解决你的问题

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

编辑2:

这对我很有效

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

---

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

伙计们，在花了太多时间四处寻找一种更简单的方法之后，我将研究中的信息组合起来，如下所示：（只需使用

getimagesize（）

功能-如果高度大于宽度，则使用高度为100%的样式回显图像标签，否则使用宽度为100%的样式回显相同的图像标签

$image=“图像路径”；
$img_size=getimagesize（$image）；
如果（$img_size[0]<$img_size[1]）{echo““}
else{echo““；}

因为这篇文章是很久以前写的，我想我应该用一种更现代的方式来更新它，不需要JS

我建议使用CSS属性

background size:cover

和

background position:center

来拉伸、裁剪和定位图像（使用

background image

将图像设置为div）

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

HTML

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

---

如果图像的高宽比错误，将宽度设置为100%将导致高度溢出，反之亦然。是的，自动缩放将改变纵横比。确保100%准确性的唯一方法是服务器端脚本。检查编辑#2。如果图像恰好大于div，您也可以执行

.myimg{max width:100%；height:auto；}

来约束宽度。如果不大于div，则将使用默认图像大小。这似乎对响应性布局很有用。对我来说，有趣的是css优先于宽度和高度属性，我不知道。在css中，可以使用

#myDiv>img{max width:100%；height:auto；}

。如果

div#myDiv

变得比图片大，图片将保持其全分辨率宽度。我希望它适合div。。。高度和宽度

$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%;'>";}

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

.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;
}