在圖像上的絕對位置的響應文本大小

在響應的日曆圖像上，我希望有一個文本與日期。當屏幕大小調整到圖像開始調整大小時，該圖像上的文本也應該調整大小，以便它相對於圖像的寬度和高度保持不變。在圖像上的絕對位置的響應文本大小

我已經實現了，通過使用JavaScript作爲我無法只能用CSS來做到這一點。我的問題是，我怎麼才能做到這一點只有CSS。可能嗎？如果是，請表明我對小提琴產生的代碼：

HTML：

<div class="datePictureHolder"> 
    <img class="img-responsive" alt="News Icon" src="http://shrani.si/f/u/13K/4rB6HshN/news-icon.png"/> 
    <div class="datePictureText"> 
    <div class="year">2017</div> 
    <div class="day">25. Feb</div> 
    </div> 
</div>

JAVASCRIPT

ResizeDateIcons(); 

window.onresize = function() { 
    ResizeDateIcons(); 
}; 
function ResizeDateIcons() { 
    // constants 
    var imageWidth = 150; // width and height must be the same 
    var dayTextSize = 36; // text size on maximum image width 
    var yearTextSize = 23; // text size on maximum image width 
    var yearLineHeigh = 70; 
    // 
    var allImages = document.getElementsByTagName("img"); 
    var allDayTexts = document.getElementsByClassName("day"); 
    var allYearTexts = document.getElementsByClassName("year"); 
    var j = 0; 
    for (var i = 0; i < allImages.length; i++) { 
    if (allImages[i].alt === "News Icon") { 
     allDayTexts[j].style.fontSize = (allImages[i].width/imageWidth) * dayTextSize + "px"; 
     allYearTexts[j].style.fontSize = (allImages[i].width/imageWidth) * yearTextSize + "px"; 
     allYearTexts[j].style.lineHeight = (allImages[i].width/imageWidth) * yearLineHeigh + "px"; 
     j++; 
    } 
    } 
}

CSS：

.datePictureHolder { 
    position: relative; 
    display: inline-block; 
} 

.datePictureText { 
    position: absolute; 
    left: 0; 
    top: 5%; 
    width: 100%; 
    text-align: center; 
    color: white; 
} 

.datePictureText .year { 
    font-size: 23px; 
    line-height: 70px; 
} 

.datePictureText .day { 
    font-size: 36px; 
    font-weight: bold; 
} 

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

來源

2017-08-03 tilenslo

說實話實現你的結果，我認爲你可以用CSS來實現這一點。 https://css-tricks.com/viewport-sized-typography/ – Luke

嘗試媒體查詢或時間。 – Prabhakaran

@Luke建議您根據視口更改字體大小。圖像不會像那樣調整大小。 – tilenslo

對不起，這有點急，但它可能有幫助！綠色容器僅用於測試目的。

https://codepen.io/anon/pen/gxwZge

.container { 
 
    width:20%; 
 
    float:left; 
 
    background:green; 
 
} 
 
.datePictureHolder { 
 
    width:auto; 
 
    float:left; 
 
    position:relative; 
 
} 
 
.datePictureHolder img { 
 
    width:100%; 
 
    float:left; 
 
} 
 
.datePictureText { 
 
    top:0; 
 
    left:0; 
 
    position:absolute; 
 
    color:white; 
 
    width:100%; 
 
    text-align:center; 
 
    padding:40% 0; 
 
    box-sizing:border-box; 
 
    font-size:1.2rem; 
 
}

<div class="container"> 
 
<div class="datePictureHolder"> 
 
    <img class="img-responsive" alt="News Icon" src="http://shrani.si/f/u/13K/4rB6HshN/news-icon.png"/> 
 
    <div class="datePictureText"> 
 
    <div class="year">2017</div> 
 
    <div class="day">25. Feb</div> 
 
    </div> 
 
</div> 
 
</div>

來源

2017-08-03 13:30:15 MegaTron

您可以使用媒體查詢或使用EM的字體

html { 
 
     font-size: 16px; 
 

 
     @media (min-width: 800px) { 
 
     font-size: 18px; 
 
     } 
 

 
     @media (min-width: 1200px) { 
 
     font-size: 20px; 
 
     } 
 
    } 
 

 
<!--- or try em for mobile web dev. 1em is 16px--> 
 
.font-resize { 
 
    font-size : 0.5 em; 
 
}

<div>Text Text</div>

來源

2017-08-03 13:31:37 Prabhakaran

在圖像上的絕對位置的響應文本大小

回答

相關問題