CSS - Сделайте текст подходящим для ширины div и будьте отзывчивы

Я хочу, чтобы изображение реагировало на изменение ширины страницы и с этим изображением текст, соответствующий ширине изображений, не разбивая на две строки и всегда заполняя ширину div.CSS - Сделайте текст подходящим для ширины div и будьте отзывчивы

Я не могу понять это. Я создал этот Plunker, чтобы проиллюстрировать мою проблему: Plunker - Make text fit to div

Как я могу сделать текст изменить размер, чтобы соответствовать ширине изображения? Я знаю, что установил размер шрифта с помощью vw, чтобы сделать его масштабированием, но это также делает его очень маленьким, когда страница отображается, например, на телефоне.

Пожалуйста, могу ли я получить помощь в том, как это сделать.

Plunker код:

HTML:

<body> 

<p class="spacer"></p> 

<img class="img-responsive page-pic" src="https://placehold.it/800x300" /> 
<h3 class="page-pic-text"> 
    abcdefghijklmnopq abc abcdefghijklmn 
</h3> 
<h1 class="page-text"> 
    Abcdefghi, abc abc abcde abcde! 
</h1> 
<BR /> 
<BR /> 
<BR /> 
<BR /> 
<BR /> 
<BR /> 
<h3>How to make the first and second text to match the pictures width?</h3> 
</body>

CSS:

.spacer { 
    height: 60px; 
} 

.page-pic { 
    margin: 0 auto; 
    width: 35%; 
    min-width: 260px; 
} 

.page-pic-text { 
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif; 
    font-size: 130%; 
    font-size: 1.357vw; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 500; 
    letter-spacing: 0.3em; 
    margin: 1% auto; 
    width: 35%; 
    min-width: 260px; 
    text-align: center; 
} 

.page-text { 
    font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif; 
    font-size: 150%; 
    font-size: 2.2vw; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 200; 
    vertical-align: bottom; 
    margin: 0% auto; 
    padding-top: 3%; 
    width: 35%; 
    min-width: 260px; 
    text-align: center; 
}

источник

2016-02-06 John Master

-3

Простой ответ: это невозможно без JavaScript.

источник

2016-02-06 16:51:27 seahorsepip

Может быть, я не знаю. Как вы можете решить эту проблему с помощью JavaScript? –

Я не понимаю ни слова, он попросил метод css, и я дал правильный ответ. – seahorsepip

@JohnMaster вы можете использовать плагины jquery, например http://fittextjs.com, или написать свой собственный js, который вычисляет размер шрифта, необходимый для того, чтобы сделать текст определенной шириной. – seahorsepip

Это то, что вы хотите. Изменение ширины и высоты в соответствии с вашими потребностями, и я использовал встроенный css.if, если вы хотите использовать внешний css и надеетесь, что ваш загрузочный лоток работает правильно. Я использовал автономную загрузку, поэтому не хочу платить внимание на этом. Просто проверьте html.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>working with bootstrap offline</title> 
 
\t <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
 
\t <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> 
 
\t <link rel="stylesheet" type="text/css" href="index.css"> 
 

 
<style type="text/css"> 
 
    body{ 
 
    \t margin:0; 
 
    \t padding:0; 
 
    } 
 

 
.page-pic-text { 
 
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif; 
 
    font-size: 130%; 
 
    font-size: 1.357vw; 
 
    font-style: normal; 
 
    font-variant: small-caps; 
 
    font-weight: 500; 
 
    letter-spacing: 0.3em; 
 
    margin: 1% auto; 
 
    width: 35%; 
 
    min-width: 260px; 
 
    text-align: center; 
 
} 
 

 
} 
 

 
</style> 
 

 
</head> 
 
<body> 
 

 
<div class="container-flud"> 
 
\t <div class="img-responsive" style="width:50%;height:50%;"> 
 
\t <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" style="width:100%;height:100%;"> 
 
    <h2 class="page-pic-text" style=""> is this what you want</h2> 
 
</div> 
 
</div> 
 

 

 

 
    
 
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 
 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
 

 

 
</body> 
 

 

 

 
</html>

источник

2016-02-06 16:52:54

Привет, спасибо за ваш ответ, но это не делает то, что я хочу. В вашем примере текст «это то, что вы хотите» не становится достаточно большим, чтобы покрыть длину отверстия изображения. Я хочу, чтобы текст изменялся в соответствии с шириной изображения. –

Я протестировал его в этом plunker: [link] (https://plnkr.co/edit/mlekA5UPlmKiK7Z4pqiO?p=preview), и текст имеет постоянный размер при изменении ширины браузера. –

как насчет изображения, он подходит для ваших нужд. Я проверю текст tht –

CSS - Сделайте текст подходящим для ширины div и будьте отзывчивы

ответ

Смежные вопросы