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 */

 }

如何设置一个固定的高度和宽度作为div的百分比，位置为：relative？

1 个答案: