这是一个css的问题，关于img在div里面的比例

cygmwpex 于 2023-07-01 发布在其他

关注(0)|答案(2)|浏览(101)

x1c 0d1x ↑这个可以

↑这个可以

↑这个不行太糟糕了，我问的原因

.gridContainer {
    display: grid;
    grid-template-columns: 70% 29.5%;
    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 10px;
    height: 90vh;
    overflow: hidden;
    position: relative;
    background-color: #ffffffc5;
    padding: 10px;
}

.gridItem {
    padding: 10px;
    display: flex;
    flex-direction: row;
}

.item1 {
    background-color: #ffffffc5;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
    display: flex;
    grid-row: 1 / span 1;
    grid-column: 1 / 1;
    min-height: 130px;

}

.selectModeContainer {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.boxesContainer {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 20px;
}

.gageContainer {
    width: 30%;
    display: flex;
    gap: 5px;
}

.statusbox {
    color: #fffdfd;
    border-radius: 5px;
    border: 2px solid rgb(0, 101, 252);
    background-color: #0186f3c5;
    flex: 1;
    margin-right: 5px;
    margin: 2px;
    width: 12em;
    height: 10rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding: 1px;
}


.item2 {
    grid-row: 1 / span 1;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    z-index: 1;
    background-color: #ffffffc5;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
    min-width: 378px;
}

.item2 .item {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(5, 53, 245, 0.349);
    background-color: #ffffffc5;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background-color 0.3s ease;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 10px;
    min-width: 107px;
}

.item3 {
    grid-row: 2 / span 5;
    grid-column: 1 / span 1;
    display: grid;
    width: auto;
    height: auto;
    background-color: #ffffffc5;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);

}

.gridImage {
    display: flex;
    position: relative;
    justify-content: center;
    border-radius: 10px;
    align-items: center;
    justify-items: center;
    justify-content: center;

}

.test {
    justify-content: center;
    position: relative;
    align-items: center;
    justify-items: center;
    justify-content: center;
    border-radius: 10px;
    width: fit-content;
    height: fit-content;

    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.responsiveImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

.test::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    /* max-width: 100%; */
    border: 1px solid #ddd;
    background-image: linear-gradient(to right, #000000 1px, transparent 1px),
        linear-gradient(to bottom, #000000 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 0 0;
}


.item4 {
    grid-row: 2 / span 3;
    grid-column: 2 / span 1;
    display: grid;
    grid-template-rows: auto 10%;
    background-color: #ffffffc5;
    gap: 10px;
    border-radius: 10px;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
    /* min-height: 368px; */
}

.item>div {
    flex: 1;
}

.item10 {
    display: grid;
    grid-row: 5 / span 2;
    grid-column: 2 / span 1;
    background-color: #ffffffc5;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
}

.pump {
    display: flex;
}

.item5,
.item6,
.item7,
.item8,
.item9,
.item11,
.item12 {
    display: none;
}

.accordion-collapse.collapse.show {
    max-height: fit-content;
}

.accordion-body {
    max-height: fit-content;
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}

.button {
    display: block;
    border: 2px solid #000;
    background-color: #ffeeca;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background-color 0.3s ease;
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.blink {
    animation: blinker 3s linear infinite;
    color: #fff;
    z-index: 1;
}

.blinkblue {
    animation: blinkerblue 3s linear infinite;
    color: #fff;
    z-index: 1;
}

.button[disabled] {
    background-color: #ccc;
    color: #999;
    cursor: not-allowed;
    border-radius: 15px;
    border: 2px solid #000;
}

@keyframes blinker {
    50% {
        opacity: 10;
        background-color: #e91e63;
    }
}

@keyframes blinkerblue {
    50% {
        opacity: 10;
        background-color: #0186f3c5;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

<div class="gridContainer">
      <div class="gridItem item1">
        <div class="selectModeContainer">
          <!-- Content for selectModeContainer -->
        </div>
        <div class="boxesContainer">
          <!-- Content for boxesContainer -->
        </div>
        <div class="gageContainer">
          <!-- Content for gageContainer -->
        </div>
      </div>
      <div class="gridItem item2">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="gridItem item3">
        <!-- Content for item3 -->
        <div class="gridImage">
          <div class="test">
            <img
              src="https://picsum.photos/1600/900"
              alt="Responsive Image"
              class="responsiveImage"
            />
          </div>
        </div>
      </div>
      <div class="gridItem item4">
        <div class="pump">
          <!-- Content for pump -->
        </div>
      </div>

      <div class="gridItem item5">
        <!-- Content for item5 -->
      </div>
      <div class="gridItem item6">
        <!-- Content for item6 -->
      </div>
      <div class="gridItem item7">
        <!-- Content for item7 -->
      </div>
      <div class="gridItem item8">
        <!-- Content for item8 -->
      </div>
      <div class="gridItem item9">
        <!-- Content for item9 -->
      </div>
      <div class="gridItem item10">
        <!-- Content for item10 -->
      </div>
      <div class="gridItem item11">
        <!-- Content for item11 -->
      </div>
      <div class="gridItem item12">
        <!-- Content for item12 -->
      </div>
    </div>

即使水平或垂直收缩，我也希望GridImage中有图像。这是一个坐标计算测试必须与响应图像大小相同。我不知道该怎么办，因为这是一个条件，你永远不能削减一个图像溢出或滚动。
我试图限制宽度和高度，以适应内容等。
我调整了最大宽度、最大高度等的比例。顶部：50%;左侧：50%;转化：translate（-50%，-50%）;我也试过
这显示图像太小。

css

来源：https://stackoverflow.com/questions/76577504/this-is-a-css-question-about-the-ratio-of-img-inside-the-div

2条答案

按热度按时间

cpjpxq1n1#

我觉得这样更好。我从.item3中删除了display: grid，并在图像周围删除了一些多余的 Package 器div。

.gridContainer {
    display: grid;
    grid-template-columns: 70% 29.5%;
    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 10px;
    height: 90vh;
    overflow: hidden;
    position: relative;
    background-color: #ffffffc5;
    padding: 10px;
}

.gridItem {
    padding: 10px;
    display: flex;
    flex-direction: row;
}

.item1 {
    background-color: #ffffffc5;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
    display: flex;
    grid-row: 1 / span 1;
    grid-column: 1 / 1;
    min-height: 130px;

}

.selectModeContainer {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.boxesContainer {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 20px;
}

.gageContainer {
    width: 30%;
    display: flex;
    gap: 5px;
}

.statusbox {
    color: #fffdfd;
    border-radius: 5px;
    border: 2px solid rgb(0, 101, 252);
    background-color: #0186f3c5;
    flex: 1;
    margin-right: 5px;
    margin: 2px;
    width: 12em;
    height: 10rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding: 1px;
}


.item2 {
    grid-row: 1 / span 1;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    z-index: 1;
    background-color: #ffffffc5;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
    min-width: 378px;
}

.item2 .item {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(5, 53, 245, 0.349);
    background-color: #ffffffc5;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background-color 0.3s ease;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 10px;
    min-width: 107px;
}

.item3 {
    grid-row: 2 / span 5;
    grid-column: 1 / span 1;
    background-color: #ffffffc5;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
}

.responsiveImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item4 {
    grid-row: 2 / span 3;
    grid-column: 2 / span 1;
    display: grid;
    grid-template-rows: auto 10%;
    background-color: #ffffffc5;
    gap: 10px;
    border-radius: 10px;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
    /* min-height: 368px; */
}

.item>div {
    flex: 1;
}

.item10 {
    display: grid;
    grid-row: 5 / span 2;
    grid-column: 2 / span 1;
    background-color: #ffffffc5;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
}

.pump {
    display: flex;
}

.item5,
.item6,
.item7,
.item8,
.item9,
.item11,
.item12 {
    display: none;
}

.accordion-collapse.collapse.show {
    max-height: fit-content;
}

.accordion-body {
    max-height: fit-content;
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}

.button {
    display: block;
    border: 2px solid #000;
    background-color: #ffeeca;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background-color 0.3s ease;
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.blink {
    animation: blinker 3s linear infinite;
    color: #fff;
    z-index: 1;
}

.blinkblue {
    animation: blinkerblue 3s linear infinite;
    color: #fff;
    z-index: 1;
}

.button[disabled] {
    background-color: #ccc;
    color: #999;
    cursor: not-allowed;
    border-radius: 15px;
    border: 2px solid #000;
}

@keyframes blinker {
    50% {
        opacity: 10;
        background-color: #e91e63;
    }
}

@keyframes blinkerblue {
    50% {
        opacity: 10;
        background-color: #0186f3c5;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

<div class="gridContainer">
      <div class="gridItem item1">
        <div class="selectModeContainer">
          <!-- Content for selectModeContainer -->
        </div>
        <div class="boxesContainer">
          <!-- Content for boxesContainer -->
        </div>
        <div class="gageContainer">
          <!-- Content for gageContainer -->
        </div>
      </div>
      <div class="gridItem item2">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="gridItem item3">
        <!-- Content for item3 -->
        <img src="https://picsum.photos/1600/900" class="responsiveImage">
      </div>
      <div class="gridItem item4">
        <div class="pump">
          <!-- Content for pump -->
        </div>
      </div>

      <div class="gridItem item5">
        <!-- Content for item5 -->
      </div>
      <div class="gridItem item6">
        <!-- Content for item6 -->
      </div>
      <div class="gridItem item7">
        <!-- Content for item7 -->
      </div>
      <div class="gridItem item8">
        <!-- Content for item8 -->
      </div>
      <div class="gridItem item9">
        <!-- Content for item9 -->
      </div>
      <div class="gridItem item10">
        <!-- Content for item10 -->
      </div>
      <div class="gridItem item11">
        <!-- Content for item11 -->
      </div>
      <div class="gridItem item12">
        <!-- Content for item12 -->
      </div>
    </div>

赞(0）回复(0）举报 2023-07-01

vh0rcniy2#