在影像下獲取標題時遇到問題-有解無憂

 <!DOCTYPE html>
<html>
    <head>
    <link href= "D:\Documents\Coding\html-css practice.css" rel = "stylesheet" type= "text/css">
        <title>Cod vanguard review</title>
        
    </head>
    <body>

    <figure>
    <img class = "image" src ="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg">
    <figcaption>
    The Campaign Image For The New Call Of Duty
    </figcaption>
    </figure>   
    
    </body>
</html> 

.image{
 width: 600px;
 position: absolute;
left: 600px;
 }

我試過使用 figcaption 和其他方法來獲取影像下的文本，但我不確定如何。

uj5u.com熱心網友回復：

我有點重新處理你的 HTML 以獲得你想要的結果。我添加了一個.container給fig-caption元素一個父元素。檢查下面的 CSS 更改。

.container > img,
h4 {
  text-align: center;
  width: 100%;
  margin-top: -.1rem;
}
.container {
  width: 100%;
  display: flex;
  justify-content: center;
}

img {
  width: 400px;
  height: 300px;
  padding: 0;
}

<!DOCTYPE html>
<html>
    <head>
    <link href= "D:\Documents\Coding\html-css practice.css" rel = "stylesheet" type= "text/css">
        <title>Cod vanguard review</title>
        
    </head>
    <body>
<div class="container">
  <div class="fig-caption">
    <img class="image" src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg">
    <h4>
       The Campaign Image For The New Call Of Duty
    </h4>
  </div>
</div>
    </body>
</html>

uj5u.com熱心網友回復：

我把人偶包在一個容器里。

img {
  width: 600px;
}
figure {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  margin: 0.5em;
  padding: 0.5em;
}

img.scaled {
  width: 100%;
}

<div class="container">
  <figure>
    <img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg" alt="Eiffel tower">
    <figcaption>The Campaign Image For The New Call Of Duty</figcaption>
  </figure>
</div>

uj5u.com熱心網友回復：

您可以設定影像的大小，但定位圖形，如下所示：

<!DOCTYPE html>
<html>
    <head>
    <link href= "D:\Documents\Coding\html-css practice.css" rel = "stylesheet" type= "text/css">
        <title>Cod vanguard review</title>
        
        <style>
       .image{
            width: 600px;
        }
        .figure {
            position: absolute;
            left: 600px;
        }
        </style>
    </head>
    <body>

    <figure class="figure">
    <img class = "image" src ="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg">
    <figcaption>
    The Campaign Image For The New Call Of Duty
    </figcaption>
    </figure>   
    
    </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361707.html

標籤：html css

下一篇：如何使用javascript更改<imgsrc>