如何将固定的高度和宽度设置为带有位置的 div 的百分比:相对

Question

我有一个div列表，每个div都包含子div，每个子div都包含图像。我有一个问题，并非所有图像的大小都是统一的，因此包含 img 标签的div 会根据图像尺寸而扩展。我无法根据像素设置div 高度和宽度，因为它可以在移动设备上工作。请让我知道是否有办法在百分比方面固定div 大小，无论图像大小如何。

.CSS：

  .listItem {
    position: relative;
    display: inline-block;
    width: 80%;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    box-shadow: 0 1px 20px 0 #000;
    margin: 1%;
    background: #ffffff;
  }
  .programContent {
    float: right;
    right: 2%;
    top: 0%;
    margin-top: auto;
    margin-bottom: auto;
    padding: 1%;
    border: 1px solid #737373;
    border-radius: 2px;
    background: rgba(190, 190, 190, 0.38);
    width:  20%;
    height: 90%;
    position: relative;
  }
  .programContent img{
    width: 100%;
    max-height: 75%;
  }

.HTML：

<div class="listItem">
  <div class="programContent">
    <img src="imageURL">
  </div>
</div>
<div class="listItem">
  <div class="programContent">
    <img src="imageURL">
  </div>
</div>

Jsfiddle：http://jsfiddle.net/fayazvf/owrk9cd2/2/

Answer 1

对于包含图像的 DIV，请定义高度和宽度。 请参阅以下示例：

.div-that-contains-image {
       width: 25%; /* Adjust as needed */
       height: 25%; /* Adjust as needed */
       overflow: hidden; /* cuts of whatever that goes beyond the given dimension */
    }

对于图像本身，宽度或高度必须设置为自动它不会变质。请参阅下面的示例。

.div-that-contains-image img {
      width: 100%; /* Equals the .div-that-contains-image */
      height: auto; /* Allows the image the breathing space so it doesn't deteriorate */
 }