圖像不會為 HTML5 響應式網站調整大小
[英]Image Doesn't Resize for HTML5 Responsive Website
問題描述
我正在嘗試將圖像與標題的文本結合起來，但圖像不會隨之調整大小。 雖然圖像看起來太大並且在我調整瀏覽器窗口大小時沒有調整大小。
HTML 代碼：
公司名稱公司名稱
CSS：
<h1 id="logo">
<a>Company Name</a>
</h1>
我嘗試了以下代碼：
#logo a {
position:relative;
display:block;
width:[image width];
height:[image height];
}
並將以下內容添加到 CSS 文件中：
#logo a { position:relative; display:block; width:[image width]; height:[image height]; }
3 個解決方案
解決方案1
0 2015-09-25 01:28:45
您用於調整 img 大小的 css：
.image img {
display: block;
width: 100%;
}
實際上並沒有針對任何目標，因為您沒有在 html 中使用類圖像。
只需為您的所有圖像添加全局樣式以使其響應。
img {
height: auto;
max-width: 100%;
}
高度：自動； 將保持圖像的比例和最大寬度：100%； 將圖像保持在其父寬度內，但不會將其拉伸到大於其原始寬度。
解決方案2
0 2016-07-08 20:08:38
Stackoverflow 不允許我發表評論，所以我不得不發布答案。 您必須將 CSS 類添加到 HTML 標記中。 我在這里創建了一個帶有演示的 Plunker。 我不確定你還需要它做什么。
我使用了您的代碼並添加了一個類：
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<div id="header">
<!-- Logo -->
<h1 class="image img"><a href="index.html"><a><img src="http://s24.postimg.org/93e2pe9f9/Data_Center_Watermark.png" alt="Company Logo"> Company Name</a></h1>
解決方案3
0 2021-07-25 02:33:32
您正在將 h1 標簽與圖像結合起來，如下代碼所示
<h1><a href="index.html"><a><img src="images/pic01.jpg" alt="Company Logo"> Company Name</a></h1>
所以最好把類名給 h1 作為
<h1 class="h1-image><a href="index.html"><a><img src="images/pic01.jpg" alt="Company Logo"> Company Name</a></h1>
因此，要調整圖像大小，您只需要調用該類並將該標簽內的 img 定位為
.h1-image img {
height: 10 rem;
width: 10 rem;
}
在這里，您需要通過查看結果來手動定義高度和寬度。 因此，響應式的更好做法是使用 rem 或 %。 並且為了完全響應使用@media only screen and (min-width: screen-size)
HTML5響應畫布大小調整
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.