Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Match Width of Text to Width of Dynamically Sized Image/Title?
In this article, we are going to learn how to match the width of text to the width of a dynamically sized image or title. Let's get into the article to learn more about matching the width of text to the width of an image.
Matching width of text to width of image
To insert an image inside a webpage or website, use the HTML <img> tag. In modern websites, images are linked to web pages using the <img> element, which contains space for the image. This prevents websites from directly adding images to web pages.
Syntax
Following is the syntax for <img> tag
<img src="" alt="" width="" height="">
Let’s look into the following examples, for getting more idea on matching the width of text to the width of an image.
Example
In the following example, we are using the <img> tag and making its width match the width of the text.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background: #EAFAF1 ;
display:inline-block;
}
img {
width:0;
min-width:100%;
}
</style>
<div class="tutorial">
<img src="https://www.tutorialspoint.com/images/logo.png">
<h2>The Best E-Learning</h2>
</div>
<div class="tutorial">
<img src="https://www.tutorialspoint.com/images/logo.png">
<h2>Find A Lot Of Courses</h2>
</div>
</body>
</html>
When the script gets executed, it will generate an output consisting of images uploaded on the webpage along with text at the bottom of each image displayed on the webpage.
Example
Considering the following example, where we are making the text get embedded in the table and matching its width to the text's width.
<!DOCTYPE html>
<html>
<body>
<style>
table {
display: table;
border:1px solid #52BE80;
}
td {
padding: 6px;
text-align: center;
border:1px solid #52BE80;
}
.tutorial{
width: 0;
min-width: 100%;
display: block;
}
</style>
<table>
<tr>
<td>Welcome</td>
<td>To</td>
<td>TP</td>
</tr>
<tr>
<td colspan="3"><img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" class="tutorial"></td>
</tr>
</table>
</body>
</html>
On running the above code, the output window will pop up, consisting of images that get inserted inside the table along with text inside the table that is displayed on the webpage.
Example
Execute the below script and observe how the text width is matched with the image width.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background: white;
display: inline-block;
}
img {
display: block;
max-height: 70vh;
}
.parent {
background: grey;
display: inline-block;
}
.description {
width: 0;
min-width: 100%;
}
</style>
<div class="parent">
<img src="https://www.tutorialspoint.com/images/logo.png">
<div class="description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</body>
</html>
When the script gets executed, it will generate an output consisting of an image along with text displayed on the webpage.
133 Views
