文字在圖片不能正常工作時，瀏覽器調整

我需要在圖像的一些基本的文字我已經website.I首先給使用放置文本RGB和RGBA functions.Then透明黑盒子這樣做通過將圖像聲明爲「相對」而將文本聲明爲「絕對」來覆蓋它。

問題

當我調整瀏覽器，文本在向下的方向上耗盡的圖像。它在https://jsfiddle.net/Lheg26kw/ 這裏顯示的是HTML的

<div class="hero-container"> 
<div class="hero-image"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%> 
<div class="hero-text"> 
    <p>This is text<br> 
    <span>this is some more text for trial of this problem</span></p> 
</div> 
</div> 
</div>

這裏是CSS：

.hero-image{ 
position: relative; 
width: 100%; 

} 
.hero-text p{ 
position: absolute; 
text-align: center; 
bottom: 0px; 
top: 0px; 
width: 100%; 
background: rgb(0, 0, 0); /* fallback color */ 
background: rgba(0, 0, 0, 0.4); 
padding-top: 80px; 
color: white; 
    font-weight: bolder; 
} 

.hero-text span{ 
font-weight: normal; 
}

需要

我需要的文本調整到最低後留在圖像金額，即如果通過手機訪問網站。

來源

2015-12-04 Jasdeep Singh Chhabra

您的填充，頂部，您的段落的像素（80px）固定金額。這就是爲什麼你的文本被壓低。使填充頂部的百分比（即10％）保持相對於圖像。 – Goombah

爲文字添加前20-25％，併爲圖片指定最小寬度，即320px，或者您可以查看flexbox並使用此https://css-tricks.com/snippets/css/a-guide-to -flexbox / – Edrees

您可以將內容克隆到英雄下方的另一個div，然後隱藏該內容。 hero-text

$(window).on('resize', function() { 
 

 
    var $mobileContent = $('.mobile-content'); 
 
    var $bodyWidth = $('body').width(); 
 

 
    if ($bodyWidth < 620) { 
 
    var $innerHero = $('.hero-text').html(); 
 
    $mobileContent.html($innerHero); 
 
    } else { 
 
    $mobileContent.empty(); 
 
    } 
 

 
}).trigger('resize');

body {margin: 0;} 
 

 
.hero-image { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.hero-text p { 
 
    position: absolute; 
 
    text-align: center; 
 
    bottom: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    background: rgb(0, 0, 0); 
 
    /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.4); 
 
    padding-top: 80px; 
 
    color: white; 
 
    font-weight: bolder; 
 
} 
 
.hero-text span { 
 
    font-weight: normal; 
 
} 
 
.mobile-content { 
 
    color: #000; 
 
    font-weight: 700; 
 
    text-align: center; 
 
} 
 
@media(max-width: 620px) { 
 
    .hero-text { 
 
    display: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<div class="hero-container"> 
 
    <div class="hero-image"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%> 
 
    <div class="hero-text"> 
 
     <p>This is text 
 
     <br> 
 
     <span>this is some more text for trial of this problem</span> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="mobile-content"></div>

來源

2015-12-04 15:18:36 Aaron

如果您沒有在圖片上放置最小尺寸，那麼文本最終不會適合任何內容。但我建議的一件事是將padding-top: 80px;從80px的常量值更改爲padding-top: 25%;等百分比。這將有助於它隨着圖像尺寸的變化而變得更好。

來源

2015-12-04 15:16:49 bwegs

這將工作：（這些取代你的CSS）

.hero-image{ 
    position: relative; 
    width: 100%;  
    } 
    .hero-image img{ 
    width:100%; 
    display:block; 
    } 
    .hero-text{ 
    width:100%; 
    height:100%; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.4); 
    position: absolute; 
    top:0; 
    left:0; 
    } 
    .hero-text p{ 
    position: absolute; 
    text-align: center; 
    top: 50%; 
    transform:translateY(-50%); 
    -webkit-transform:translateY(-50%); 
    -moz-transform:translateY(-50%); 
    -ms-transform:translateY(-50%); 
    width:100%; 
    padding: 5px 0; 
    margin:0; 
    color: white; 
    font-weight: bolder; 
    } 

    .hero-text span{ 
    font-weight: normal; 
    }

來源

2015-12-04 15:40:37

文字在圖片不能正常工作時，瀏覽器調整

回答

相關問題