Responsive Textgröße mit absoluter Position über Bild

Über das responsive Kalenderbild möchte ich einen Text mit dem Datum haben. Wenn die Größe des Bildschirms bis zu dem Punkt geändert wird, an dem die Größe des Bilds beginnt, sollte auch der Text über diesem Bild in der Größe angepasst werden, damit es relativ zur Bildbreite und -höhe gleich bleibt. Responsive Textgröße mit absoluter Position über Bild

Ich habe erreicht, dass durch mit Hilfe von Javascript, da ich nicht in der Lage war, es mit CSS nur zu tun. Meine Frage ist, wie kann ich das nur mit CSS machen? Ist es möglich? Wenn ja, bitte zeigen Sie, dass in dem Code, den ich an der Geige erstellt haben:

https://jsfiddle.net/bej0od7r/

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; 
}

Quelle

2017-08-03 tilenslo

erreichen, ehrlich zu sein, ich Ich denke, du könntest das nur mit CSS erreichen. https://css-tricks.com/viewport-sized-typography/ – Luke

versuchen Sie Medienabfrage oder em. – Prabhakaran

@Luke, was Sie vorschlagen, ist die Schriftgröße basierend auf View-Port zu ändern. Das Bild wird nicht so skaliert. – tilenslo

Sorry, das ist ein bisschen eilig, aber es könnte helfen! Der grüne Container ist nur zu Testzwecken da.

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>

Quelle

2017-08-03 13:30:15 MegaTron

Sie können Ihr Ergebnis entweder mit Medienabfrage oder mit em für Schriftarten

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>

Quelle

2017-08-03 13:31:37 Prabhakaran

Responsive Textgröße mit absoluter Position über Bild

Antwort

Verwandte Themen