請你繼續幫我修改,需要實現img和H2在同一個盒子中,另外背景顔色為深色,H2文字顔色為白色,將img圖標放在好
时间: 2024-03-23 09:40:43 浏览: 17
好的,您可以使用以下的 HTML 和 CSS 代码:
```html
<div id="img">
<div class="img-container">
<img src="images/ivpd.png" alt="logo">
</div>
<h2>BL製造管理系統</h2>
</div>
```
```css
#img {
background-color: #333; /* 设置背景颜色为深色 */
display: flex; /* 设置弹性布局 */
align-items: center; /* 垂直居中 */
justify-content: flex-start; /* 左对齐 */
padding: 10px; /* 添加一定的内边距 */
}
.img-container {
width: 60px; /* 设置图片容器的宽度 */
height: 60px; /* 设置图片容器的高度 */
margin-right: 10px; /* 设置图片容器与文字之间的间距 */
}
.img-container img {
width: 100%; /* 设置图片宽度为容器的宽度 */
height: 100%; /* 设置图片高度为容器的高度 */
object-fit: contain; /* 缩放图片以保持比例,不裁剪 */
}
h2 {
color: #fff; /* 设置文字颜色为白色 */
}
```
解释一下:
- `display: flex;` 将容器 `#img` 设置为弹性布局。
- `align-items: center;` 将子元素垂直居中。
- `justify-content: flex-start;` 将子元素左对齐。
- `.img-container` 设置图片的容器大小和间距,将图片缩放以适应容器大小。
- `object-fit: contain;` 缩放图片以保持比例,如果图片比容器大,则等比缩小以适应容器大小,不裁剪。
- `h2` 设置文字颜色为白色。