我想在div内放置一个图像(紫色,见下图),其尺寸以%表示,并且该图像永远不会离开div,而是在需要时调整大小,并保持宽高比。< / p>
目前,我的代码如下,但是图像来自div,如下面的图片所示。
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
}
#conteneurImage img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="home.png">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
结果:
我期望的是
答案 0 :(得分:0)
html{
min-height:100vh;
position:relative;
}
body{
height:100vh;
overflow:hidden;
}
#grille {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule
{
flex-direction: column;
width:100%;
height:calc(100% / 3);
background-color: aqua;
}
#conteneurImage
{
width:100%;
height:80%;
background-color: violet;
}
#conteneurImage img{
width:100%;
height: auto;
}
html{
min-height:100vh;
position:relative;
}
body{
height:100vh;
overflow:hidden;
}
#grille {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule
{
flex-direction: column;
width:100%;
height:calc(100% / 3);
background-color: aqua;
}
#conteneurImage
{
width:100%;
height:80%;
background-color: violet;
}
#conteneurImage img{
width:100%;
height: 100%;
}
<html>
<head>
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="https://mbtskoudsalg.com/images/chain-fence-png-7.png">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
答案 1 :(得分:0)
您可以在#conteneurImage中使用“ display:flex; justify-content:center;”。然后使用“ width:auto; height:100%;”在#conteneurImageImage img中。您可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/
中了解有关flex的更多信息
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
display:flex;
justify-content: center;
}
#conteneurImage img {
width: auto;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="https://image.flaticon.com/icons/svg/2/2144.svg">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
答案 2 :(得分:-1)
只需添加
#conteneurImage img {
display: block;
width: 100%;
}