这是一个关于 div 内 img 比例的 CSS 问题。

huangapple
go评论85阅读模式
英文:

This is a css question about the ratio of img inside the div

问题

以下是代码的翻译部分：

  1. .gridContainer {
  2.     display: grid;
  3.     grid-template-columns: 70% 29.5%;
  4.     grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  5.     grid-gap: 10px;
  6.     height: 90vh;
  7.     overflow: hidden;
  8.     position: relative;
  9.     background-color: #ffffffc5;
  10.     padding: 10px;
  11. }
  13. /* ... 其他 CSS 样式 ... */
  15. .responsiveImage {
  16.     display: block;
  17.     width: 100%;
  18.     height: 100%;
  19.     object-fit: contain;
  20.     max-width: 100%;
  21.     max-height: 100%;
  22. }
  24. /* ... 更多 CSS 样式 ... */
  26. @keyframes blinker {
  27.     50% {
  28.         opacity: 10;
  29.         background-color: #e91e63;
  30.     }
  31. }
  33. @keyframes blinkerblue {
  34.     50% {
  35.         opacity: 10;
  36.         background-color: #0186f3c5;
  37.     }
  38. }
  40. @keyframes slideIn {
  41.     0% {
  42.         transform: translateY(-100%);
  43.         opacity: 0;
  44.     }
  46.     100% {
  47.         transform: translateY(0);
  48.         opacity: 1;
  49.     }
  50. }
  52. @keyframes slideOut {
  53.     0% {
  54.         transform: translateY(0);
  55.         opacity: 1;
  56.     }
  58.     100% {
  59.         transform: translateY(100%);
  60.         opacity: 0;
  61.     }
  62. }
  1. <div class="gridContainer">
  2.     <div class="gridItem item1">
  3.         <div class="selectModeContainer">
  4.             <!-- selectModeContainer 内容 -->
  5.         </div>
  6.         <div class="boxesContainer">
  7.             <!-- boxesContainer 内容 -->
  8.         </div>
  9.         <div class="gageContainer">
  10.             <!-- gageContainer 内容 -->
  11.         </div>
  12.     </div>
  13.     <div class="gridItem item2">
  14.         <div class="item"></div>
  15.         <div class="item"></div>
  16.         <div class="item"></div>
  17.         <div class="item"></div>
  18.         <div class="item"></div>
  19.         <div class="item"></div>
  20.     </div>
  21.     <div class="gridItem item3">
  22.         <!-- item3 内容 -->
  23.         <div class="gridImage">
  24.             <div class="test">
  25.                 <img src="https://picsum.photos/1600/900" alt="Responsive Image" class="responsiveImage" />
  26.             </div>
  27.         </div>
  28.     </div>
  29.     <div class="gridItem item4">
  30.         <div class="pump">
  31.             <!-- pump 内容 -->
  32.         </div>
  33.     </div>
  35.     <!-- 其他 gridItem 的内容 -->
  36. </div>

希望这对你有所帮助！如果有任何其他问题，请随时提出。

英文:

这是一个关于 div 内 img 比例的 CSS 问题。
↑ this is OK
这是一个关于 div 内 img 比例的 CSS 问题。
↑ this is OK
这是一个关于 div 内 img 比例的 CSS 问题。
↑ this is not ok it's too bad ,The reason why I asked

这是一个关于 div 内 img 比例的 CSS 问题。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .gridContainer {
  2.     display: grid;
  3.     grid-template-columns: 70% 29.5%;
  4.     grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  5.     grid-gap: 10px;
  6.     height: 90vh;
  7.     overflow: hidden;
  8.     position: relative;
  9.     background-color: #ffffffc5;
  10.     padding: 10px;
  11. }
  13. .gridItem {
  14.     padding: 10px;
  15.     display: flex;
  16.     flex-direction: row;
  17. }
  19. .item1 {
  20.     background-color: #ffffffc5;
  21.     border-radius: 10px;
  22.     border: 2px solid rgb(5, 53, 245);
  23.     display: flex;
  24.     grid-row: 1 / span 1;
  25.     grid-column: 1 / 1;
  26.     min-height: 130px;
  28. }
  30. .selectModeContainer {
  31.     width: 45%;
  32.     display: flex;
  33.     flex-direction: column;
  34.     align-items: center;
  35.     justify-content: center;
  36.     gap: 1px;
  37. }
  39. .boxesContainer {
  40.     width: 25%;
  41.     display: flex;
  42.     flex-direction: column;
  43.     align-items: flex-end;
  44.     margin-right: 20px;
  45. }
  47. .gageContainer {
  48.     width: 30%;
  49.     display: flex;
  50.     gap: 5px;
  51. }
  53. .statusbox {
  54.     color: #fffdfd;
  55.     border-radius: 5px;
  56.     border: 2px solid rgb(0, 101, 252);
  57.     background-color: #0186f3c5;
  58.     flex: 1;
  59.     margin-right: 5px;
  60.     margin: 2px;
  61.     width: 12em;
  62.     height: 10rem;
  63.     display: flex;
  64.     justify-content: flex-end;
  65.     align-items: center;
  66.     text-align: right;
  67.     padding: 1px;
  68. }
  72. .item2 {
  73.     grid-row: 1 / span 1;
  74.     grid-column: 2 / 3;
  75.     display: grid;
  76.     grid-template-columns: repeat(3, 1fr);
  77.     grid-template-rows: repeat(2, 1fr);
  78.     gap: 10px;
  79.     z-index: 1;
  80.     background-color: #ffffffc5;
  81.     border-radius: 10px;
  82.     border: 2px solid rgb(5, 53, 245);
  83.     min-width: 378px;
  84. }
  86. .item2 .item {
  87.     display: flex;
  88.     justify-content: center;
  89.     align-items: center;
  90.     border: 2px solid rgba(5, 53, 245, 0.349);
  91.     background-color: #ffffffc5;
  92.     font-size: 16px;
  93.     text-transform: uppercase;
  94.     letter-spacing: 2px;
  95.     transition: background-color 0.3s ease;
  96.     width: 100%;
  97.     height: 100%;
  98.     z-index: 1;
  99.     border-radius: 10px;
  100.     min-width: 107px;
  101. }
  103. .item3 {
  104.     grid-row: 2 / span 5;
  105.     grid-column: 1 / span 1;
  106.     display: grid;
  107.     width: auto;
  108.     height: auto;
  109.     background-color: #ffffffc5;
  110.     border-radius: 10px;
  111.     border: 2px solid rgb(5, 53, 245);
  113. }
  115. .gridImage {
  116.     display: flex;
  117.     position: relative;
  118.     justify-content: center;
  119.     border-radius: 10px;
  120.     align-items: center;
  121.     justify-items: center;
  122.     justify-content: center;
  124. }
  126. .test {
  127.     justify-content: center;
  128.     position: relative;
  129.     align-items: center;
  130.     justify-items: center;
  131.     justify-content: center;
  132.     border-radius: 10px;
  133.     width: fit-content;
  134.     height: fit-content;
  136.     max-width: 100%;
  137.     max-height: 100%;
  138.     margin: auto;
  139. }
  141. .responsiveImage {
  142.     display: block;
  143.     width: 100%;
  144.     height: 100%;
  145.     object-fit: contain;
  146.     max-width: 100%;
  147.     max-height: 100%;
  148. }
  150. .test::before {
  151.     content: &quot;&quot;;
  152.     position: absolute;
  153.     top: 0;
  154.     left: 0;
  155.     right: 0;
  156.     bottom: 0;
  157.     z-index: 0;
  158.     width: 100%;
  159.     height: 100%;
  160.     /* max-width: 100%; */
  161.     border: 1px solid #ddd;
  162.     background-image: linear-gradient(to right, #000000 1px, transparent 1px),
  163.         linear-gradient(to bottom, #000000 1px, transparent 1px);
  164.     background-size: 40px 40px;
  165.     background-position: 0 0, 0 0;
  166. }
  170. .item4 {
  171.     grid-row: 2 / span 3;
  172.     grid-column: 2 / span 1;
  173.     display: grid;
  174.     grid-template-rows: auto 10%;
  175.     background-color: #ffffffc5;
  176.     gap: 10px;
  177.     border-radius: 10px;
  178.     overflow: hidden;
  179.     border-radius: 10px;
  180.     border: 2px solid rgb(5, 53, 245);
  181.     /* min-height: 368px; */
  182. }
  184. .item&gt;div {
  185.     flex: 1;
  186. }
  188. .item10 {
  189.     display: grid;
  190.     grid-row: 5 / span 2;
  191.     grid-column: 2 / span 1;
  192.     background-color: #ffffffc5;
  193.     border-radius: 10px;
  194.     border: 2px solid rgb(5, 53, 245);
  195. }
  198. .pump {
  199.     display: flex;
  200. }
  202. .item5,
  203. .item6,
  204. .item7,
  205. .item8,
  206. .item9,
  207. .item11,
  208. .item12 {
  209.     display: none;
  210. }
  212. .accordion-collapse.collapse.show {
  213.     max-height: fit-content;
  214. }
  216. .accordion-body {
  217.     max-height: fit-content;
  218.     padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
  219. }
  221. .button {
  222.     display: block;
  223.     border: 2px solid #000;
  224.     background-color: #ffeeca;
  225.     font-size: 16px;
  226.     text-align: center;
  227.     text-transform: uppercase;
  228.     letter-spacing: 2px;
  229.     transition: background-color 0.3s ease;
  230.     width: 100%;
  231.     height: 100%;
  232.     border-radius: 15px;
  233. }
  235. .blink {
  236.     animation: blinker 3s linear infinite;
  237.     color: #fff;
  238.     z-index: 1;
  239. }
  241. .blinkblue {
  242.     animation: blinkerblue 3s linear infinite;
  243.     color: #fff;
  244.     z-index: 1;
  245. }
  247. .button[disabled] {
  248.     background-color: #ccc;
  249.     color: #999;
  250.     cursor: not-allowed;
  251.     border-radius: 15px;
  252.     border: 2px solid #000;
  253. }
  256. @keyframes blinker {
  257.     50% {
  258.         opacity: 10;
  259.         background-color: #e91e63;
  260.     }
  261. }
  263. @keyframes blinkerblue {
  264.     50% {
  265.         opacity: 10;
  266.         background-color: #0186f3c5;
  267.     }
  268. }
  270. @keyframes slideIn {
  271.     0% {
  272.         transform: translateY(-100%);
  273.         opacity: 0;
  274.     }
  276.     100% {
  277.         transform: translateY(0);
  278.         opacity: 1;
  279.     }
  280. }
  282. @keyframes slideOut {
  283.     0% {
  284.         transform: translateY(0);
  285.         opacity: 1;
  286.     }
  288.     100% {
  289.         transform: translateY(100%);
  290.         opacity: 0;
  291.     }
  292. }

<!-- language: lang-html -->

  1.     &lt;div class=&quot;gridContainer&quot;&gt;
  2.       &lt;div class=&quot;gridItem item1&quot;&gt;
  3.         &lt;div class=&quot;selectModeContainer&quot;&gt;
  4.           &lt;!-- Content for selectModeContainer --&gt;
  5.         &lt;/div&gt;
  6.         &lt;div class=&quot;boxesContainer&quot;&gt;
  7.           &lt;!-- Content for boxesContainer --&gt;
  8.         &lt;/div&gt;
  9.         &lt;div class=&quot;gageContainer&quot;&gt;
  10.           &lt;!-- Content for gageContainer --&gt;
  11.         &lt;/div&gt;
  12.       &lt;/div&gt;
  13.       &lt;div class=&quot;gridItem item2&quot;&gt;
  14.         &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  15.         &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  16.         &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  17.         &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  18.         &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  19.         &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  20.       &lt;/div&gt;
  21.       &lt;div class=&quot;gridItem item3&quot;&gt;
  22.         &lt;!-- Content for item3 --&gt;
  23.         &lt;div class=&quot;gridImage&quot;&gt;
  24.           &lt;div class=&quot;test&quot;&gt;
  25.             &lt;img
  26.               src=&quot;https://picsum.photos/1600/900&quot;
  27.               alt=&quot;Responsive Image&quot;
  28.               class=&quot;responsiveImage&quot;
  29.             /&gt;
  30.           &lt;/div&gt;
  31.         &lt;/div&gt;
  32.       &lt;/div&gt;
  33.       &lt;div class=&quot;gridItem item4&quot;&gt;
  34.         &lt;div class=&quot;pump&quot;&gt;
  35.           &lt;!-- Content for pump --&gt;
  36.         &lt;/div&gt;
  37.       &lt;/div&gt;
  39.       &lt;div class=&quot;gridItem item5&quot;&gt;
  40.         &lt;!-- Content for item5 --&gt;
  41.       &lt;/div&gt;
  42.       &lt;div class=&quot;gridItem item6&quot;&gt;
  43.         &lt;!-- Content for item6 --&gt;
  44.       &lt;/div&gt;
  45.       &lt;div class=&quot;gridItem item7&quot;&gt;
  46.         &lt;!-- Content for item7 --&gt;
  47.       &lt;/div&gt;
  48.       &lt;div class=&quot;gridItem item8&quot;&gt;
  49.         &lt;!-- Content for item8 --&gt;
  50.       &lt;/div&gt;
  51.       &lt;div class=&quot;gridItem item9&quot;&gt;
  52.         &lt;!-- Content for item9 --&gt;
  53.       &lt;/div&gt;
  54.       &lt;div class=&quot;gridItem item10&quot;&gt;
  55.         &lt;!-- Content for item10 --&gt;
  56.       &lt;/div&gt;
  57.       &lt;div class=&quot;gridItem item11&quot;&gt;
  58.         &lt;!-- Content for item11 --&gt;
  59.       &lt;/div&gt;
  60.       &lt;div class=&quot;gridItem item12&quot;&gt;
  61.         &lt;!-- Content for item12 --&gt;
  62.       &lt;/div&gt;
  63.     &lt;/div&gt;

<!-- end snippet -->

Even if it shrinks horizontally or vertically, I hope there is an image in GridImage.
It's a coordinate calculation
The test must be the same size as the response image.
I don't know what to do because it's a condition where you can never cut an image with overFlow or make a scroll..

I tried to limit the width and height to fit-content, etc.

I adjusted the ratio of max-width, max-height, etc. top: 50%;
left: 50%;
transform: translate (-50%, -50%); I've also tried it

This shows the image too small.

答案1

得分: 1

我认为这样更好。我从.item3中删除了display: grid，同时也删除了图像周围一些多余的包装div。

  1. .gridContainer {
  2.     /* CSS样式内容 */
  3. }
  5. .gridItem {
  6.     /* CSS样式内容 */
  7. }
  9. .item1 {
  10.     /* CSS样式内容 */
  11. }
  13. .selectModeContainer {
  14.     /* CSS样式内容 */
  15. }
  17. .boxesContainer {
  18.     /* CSS样式内容 */
  19. }
  21. .gageContainer {
  22.     /* CSS样式内容 */
  23. }
  25. .item2 {
  26.     /* CSS样式内容 */
  27. }
  29. .item2 .item {
  30.     /* CSS样式内容 */
  31. }
  33. .item3 {
  34.     /* CSS样式内容 */
  35. }
  37. .responsiveImage {
  38.     /* CSS样式内容 */
  39. }
  41. .item4 {
  42.     /* CSS样式内容 */
  43. }
  45. .item>div {
  46.     /* CSS样式内容 */
  47. }
  49. .item10 {
  50.     /* CSS样式内容 */
  51. }
  53. .pump {
  54.     /* CSS样式内容 */
  55. }
  57. .item5,
  58. .item6,
  59. .item7,
  60. .item8,
  61. .item9,
  62. .item11,
  63. .item12 {
  64.     /* CSS样式内容 */
  65. }
  67. .accordion-collapse.collapse.show {
  68.     /* CSS样式内容 */
  69. }
  71. .accordion-body {
  72.     /* CSS样式内容 */
  73. }
  75. .button {
  76.     /* CSS样式内容 */
  77. }
  79. .blink {
  80.     /* CSS样式内容 */
  81. }
  83. .blinkblue {
  84.     /* CSS样式内容 */
  85. }
  87. .button[disabled] {
  88.     /* CSS样式内容 */
  89. }
  91. @keyframes blinker {
  92.     /* CSS样式内容 */
  93. }
  95. @keyframes blinkerblue {
  96.     /* CSS样式内容 */
  97. }
  99. @keyframes slideIn {
  100.     /* CSS样式内容 */
  101. }
  103. @keyframes slideOut {
  104.     /* CSS样式内容 */
  105. }
  1. <div class="gridContainer">
  2.     <div class="gridItem item1">
  3.         <div class="selectModeContainer">
  4.             <!-- selectModeContainer的内容 -->
  5.         </div>
  6.         <div class="boxesContainer">
  7.             <!-- boxesContainer的内容 -->
  8.         </div>
  9.         <div class="gageContainer">
  10.             <!-- gageContainer的内容 -->
  11.         </div>
  12.     </div>
  13.     <div class="gridItem item2">
  14.         <div class="item"></div>
  15.         <div class="item"></div>
  16.         <div class="item"></div>
  17.         <div class="item"></div>
  18.         <div class="item"></div>
  19.         <div class="item"></div>
  20.     </div>
  21.     <div class="gridItem item3">
  22.         <!-- item3的内容 -->
  23.         <img src="https://picsum.photos/1600/900" class="responsiveImage">
  24.     </div>
  25.     <div class="gridItem item4">
  26.         <div class="pump">
  27.             <!-- pump的内容 -->
  28.         </div>
  29.     </div>
  30.     <div class="gridItem item5">
  31.         <!-- item5的内容 -->
  32.     </div>
  33.     <div class="gridItem item6">
  34.         <!-- item6的内容 -->
  35.     </div>
  36.     <div class="gridItem item7">
  37.         <!-- item7的内容 -->
  38.     </div>
  39.     <div class="gridItem item8">
  40.         <!-- item8的内容 -->
  41.     </div>
  42.     <div class="gridItem item9">
  43.         <!-- item9的内容 -->
  44.     </div>
  45.     <div class="gridItem item10">
  46.         <!-- item10的内容 -->
  47.     </div>
  48.     <div class="gridItem item11">
  49.         <!-- item11的内容 -->
  50.     </div>
  51.     <div class="gridItem item12">
  52.         <!-- item12的内容 -->
  53.     </div>
  54. </div>
英文:

I think this is better. I removed display: grid from .item3 as well as some superfluous wrapper divs around the image.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .gridContainer {
  2. display: grid;
  3. grid-template-columns: 70% 29.5%;
  4. grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  5. grid-gap: 10px;
  6. height: 90vh;
  7. overflow: hidden;
  8. position: relative;
  9. background-color: #ffffffc5;
  10. padding: 10px;
  11. }
  12. .gridItem {
  13. padding: 10px;
  14. display: flex;
  15. flex-direction: row;
  16. }
  17. .item1 {
  18. background-color: #ffffffc5;
  19. border-radius: 10px;
  20. border: 2px solid rgb(5, 53, 245);
  21. display: flex;
  22. grid-row: 1 / span 1;
  23. grid-column: 1 / 1;
  24. min-height: 130px;
  25. }
  26. .selectModeContainer {
  27. width: 45%;
  28. display: flex;
  29. flex-direction: column;
  30. align-items: center;
  31. justify-content: center;
  32. gap: 1px;
  33. }
  34. .boxesContainer {
  35. width: 25%;
  36. display: flex;
  37. flex-direction: column;
  38. align-items: flex-end;
  39. margin-right: 20px;
  40. }
  41. .gageContainer {
  42. width: 30%;
  43. display: flex;
  44. gap: 5px;
  45. }
  46. .statusbox {
  47. color: #fffdfd;
  48. border-radius: 5px;
  49. border: 2px solid rgb(0, 101, 252);
  50. background-color: #0186f3c5;
  51. flex: 1;
  52. margin-right: 5px;
  53. margin: 2px;
  54. width: 12em;
  55. height: 10rem;
  56. display: flex;
  57. justify-content: flex-end;
  58. align-items: center;
  59. text-align: right;
  60. padding: 1px;
  61. }
  62. .item2 {
  63. grid-row: 1 / span 1;
  64. grid-column: 2 / 3;
  65. display: grid;
  66. grid-template-columns: repeat(3, 1fr);
  67. grid-template-rows: repeat(2, 1fr);
  68. gap: 10px;
  69. z-index: 1;
  70. background-color: #ffffffc5;
  71. border-radius: 10px;
  72. border: 2px solid rgb(5, 53, 245);
  73. min-width: 378px;
  74. }
  75. .item2 .item {
  76. display: flex;
  77. justify-content: center;
  78. align-items: center;
  79. border: 2px solid rgba(5, 53, 245, 0.349);
  80. background-color: #ffffffc5;
  81. font-size: 16px;
  82. text-transform: uppercase;
  83. letter-spacing: 2px;
  84. transition: background-color 0.3s ease;
  85. width: 100%;
  86. height: 100%;
  87. z-index: 1;
  88. border-radius: 10px;
  89. min-width: 107px;
  90. }
  91. .item3 {
  92. grid-row: 2 / span 5;
  93. grid-column: 1 / span 1;
  94. background-color: #ffffffc5;
  95. border-radius: 10px;
  96. border: 2px solid rgb(5, 53, 245);
  97. }
  98. .responsiveImage {
  99. display: block;
  100. width: 100%;
  101. height: 100%;
  102. object-fit: contain;
  103. }
  104. .item4 {
  105. grid-row: 2 / span 3;
  106. grid-column: 2 / span 1;
  107. display: grid;
  108. grid-template-rows: auto 10%;
  109. background-color: #ffffffc5;
  110. gap: 10px;
  111. border-radius: 10px;
  112. overflow: hidden;
  113. border-radius: 10px;
  114. border: 2px solid rgb(5, 53, 245);
  115. /* min-height: 368px; */
  116. }
  117. .item&gt;div {
  118. flex: 1;
  119. }
  120. .item10 {
  121. display: grid;
  122. grid-row: 5 / span 2;
  123. grid-column: 2 / span 1;
  124. background-color: #ffffffc5;
  125. border-radius: 10px;
  126. border: 2px solid rgb(5, 53, 245);
  127. }
  128. .pump {
  129. display: flex;
  130. }
  131. .item5,
  132. .item6,
  133. .item7,
  134. .item8,
  135. .item9,
  136. .item11,
  137. .item12 {
  138. display: none;
  139. }
  140. .accordion-collapse.collapse.show {
  141. max-height: fit-content;
  142. }
  143. .accordion-body {
  144. max-height: fit-content;
  145. padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
  146. }
  147. .button {
  148. display: block;
  149. border: 2px solid #000;
  150. background-color: #ffeeca;
  151. font-size: 16px;
  152. text-align: center;
  153. text-transform: uppercase;
  154. letter-spacing: 2px;
  155. transition: background-color 0.3s ease;
  156. width: 100%;
  157. height: 100%;
  158. border-radius: 15px;
  159. }
  160. .blink {
  161. animation: blinker 3s linear infinite;
  162. color: #fff;
  163. z-index: 1;
  164. }
  165. .blinkblue {
  166. animation: blinkerblue 3s linear infinite;
  167. color: #fff;
  168. z-index: 1;
  169. }
  170. .button[disabled] {
  171. background-color: #ccc;
  172. color: #999;
  173. cursor: not-allowed;
  174. border-radius: 15px;
  175. border: 2px solid #000;
  176. }
  177. @keyframes blinker {
  178. 50% {
  179. opacity: 10;
  180. background-color: #e91e63;
  181. }
  182. }
  183. @keyframes blinkerblue {
  184. 50% {
  185. opacity: 10;
  186. background-color: #0186f3c5;
  187. }
  188. }
  189. @keyframes slideIn {
  190. 0% {
  191. transform: translateY(-100%);
  192. opacity: 0;
  193. }
  194. 100% {
  195. transform: translateY(0);
  196. opacity: 1;
  197. }
  198. }
  199. @keyframes slideOut {
  200. 0% {
  201. transform: translateY(0);
  202. opacity: 1;
  203. }
  204. 100% {
  205. transform: translateY(100%);
  206. opacity: 0;
  207. }
  208. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;gridContainer&quot;&gt;
  2. &lt;div class=&quot;gridItem item1&quot;&gt;
  3. &lt;div class=&quot;selectModeContainer&quot;&gt;
  4. &lt;!-- Content for selectModeContainer --&gt;
  5. &lt;/div&gt;
  6. &lt;div class=&quot;boxesContainer&quot;&gt;
  7. &lt;!-- Content for boxesContainer --&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&quot;gageContainer&quot;&gt;
  10. &lt;!-- Content for gageContainer --&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;
  13. &lt;div class=&quot;gridItem item2&quot;&gt;
  14. &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  15. &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  16. &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  17. &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  18. &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  19. &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;div class=&quot;gridItem item3&quot;&gt;
  22. &lt;!-- Content for item3 --&gt;
  23. &lt;img src=&quot;https://picsum.photos/1600/900&quot; class=&quot;responsiveImage&quot;&gt;
  24. &lt;/div&gt;
  25. &lt;div class=&quot;gridItem item4&quot;&gt;
  26. &lt;div class=&quot;pump&quot;&gt;
  27. &lt;!-- Content for pump --&gt;
  28. &lt;/div&gt;
  29. &lt;/div&gt;
  30. &lt;div class=&quot;gridItem item5&quot;&gt;
  31. &lt;!-- Content for item5 --&gt;
  32. &lt;/div&gt;
  33. &lt;div class=&quot;gridItem item6&quot;&gt;
  34. &lt;!-- Content for item6 --&gt;
  35. &lt;/div&gt;
  36. &lt;div class=&quot;gridItem item7&quot;&gt;
  37. &lt;!-- Content for item7 --&gt;
  38. &lt;/div&gt;
  39. &lt;div class=&quot;gridItem item8&quot;&gt;
  40. &lt;!-- Content for item8 --&gt;
  41. &lt;/div&gt;
  42. &lt;div class=&quot;gridItem item9&quot;&gt;
  43. &lt;!-- Content for item9 --&gt;
  44. &lt;/div&gt;
  45. &lt;div class=&quot;gridItem item10&quot;&gt;
  46. &lt;!-- Content for item10 --&gt;
  47. &lt;/div&gt;
  48. &lt;div class=&quot;gridItem item11&quot;&gt;
  49. &lt;!-- Content for item11 --&gt;
  50. &lt;/div&gt;
  51. &lt;div class=&quot;gridItem item12&quot;&gt;
  52. &lt;!-- Content for item12 --&gt;
  53. &lt;/div&gt;
  54. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

如果它不会自动运行...我通过指定每一个来制定了一个临时处方。我希望它能够自动运行...

英文:

这是一个关于 div 内 img 比例的 CSS 问题。

If it doesn't work automatically...I made a temporary prescription by designating each and every one.
I wish it was automatic...

huangapple
  • 本文由 发表于 2023年6月29日 09:00:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/76577504.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定