adjusting the dimensions of images to ensure uniformity in size

After many attempts, I am still struggling to resize my image. Can anyone offer assistance?

I want all images to have the same dimensions. Here is the HTML code:

<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

<body class="body">

  <div class="wiesiek">
    <h1> Wiesiek Bland - My portfolio </h1>
    <h2> Warsaw, Poland </h2>

    <div class="facebook, inline">
      <a href="https://www.facebook.com/wilyb"><img class="small-picture" src=http://static1.squarespace.com/static/4f5810d9e4b0ebbf0a1507a6/t/55a6e39be4b0e13bc07f93a1/1437000604121/></a>
    </div>
    <div class"github, inline">
      <a href="https://github.com/Wiesiek2811"><img class="small-picture" src=http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png></a>
    </div>
  </div>
</body>

Additionally, here is the CSS code provided:

.facebook {
  padding-left: 800px;
  max-width:
}

.github {
  width: 80px;
}

.inline {
  float: left;
}

Answer №1

https://jsfiddle.net/90wn844n/

HTML:

<div class="johnsmith">
<h1> John Smith - Web Developer </h1>
<h2> New York, USA</h2>

<div class="linkedin inline">
  <a href="https://www.linkedin.com/in/johnsmith"><img class="small-picture" src="http://static.example.com/linkedin-icon.jpg"></a>
</div>

 <div clas="twitter inline">
 <a href="https://twitter.com/john_smith"><img class="small-picture" src="http://static.example.com/twitter-icon.jpg"></a>
</div>
</div>

</body>

CSS:

.linkedin {
 padding-left: 800px;
}

.twitter {
width: 80px;
}

.inline {
float: left;
}

.small-picture {
  width: 80px;
}

Answer №2

To adjust the size of an image using HTML, you can use the following code:

Apply the desired width and height to the HTML tag:

<img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" height="500px" width="500px">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Locate all hyperlinks that begin with a space character

I am attempting to locate all hrefs that belong to an 'a' element and begin with 'start/of/link'. I experimented with the following code snippet after discovering it as a resolution to a related question, however, it was ineffective. hr ...

Submitting form data via Ajax to be processed by Express.js with body parser

Having trouble sending form data to Node.js via AJAX. Using Express with body parser on Node.js However, receiving undefined in req.body. After searching extensively online and trying various solutions without success, I am seeking assistance on the c ...

Tips for sending <p> data to a router function with HTML

I am currently working on a page where users are presented with a list of unverified accounts, each containing its own form element. Each form has a "submit" button that triggers a POST call to /verify. However, I am facing an issue where the data within t ...

Position the background in CSS according to the class name

There are a total of 8 icons, with 4 in blue and 4 in grey. Therefore, product 1 has both a blue icon and a grey icon. When the user has product 1, they will see the blue icon (with an added class on the container called .gotProduct), and when they don&ap ...

What is the process for dynamically looping through a table and adding form data to the table?

I am in the process of developing an hour tracking website that utilizes a form and a table. Currently, I have implemented the functionality where the form content gets added to the table upon the first submission. However, I need it to allow users to inp ...

Shifting the "active" designation within a dropdown menu to correspond with the user's current page

Recently, I decided to explore the Foundation framework. However, my first stumbling block was figuring out how to use the "active" class in a dropdown menu. I am hoping to have the class applied to the page link that is currently being viewed by the user ...

The -webkit-background-clip feature seems to be malfunctioning in Safari

I am experiencing an issue where the code works perfectly on Chrome but fails to function properly on Safari. I have been unable to pinpoint the cause of this discrepancy and any assistance or insights would be greatly appreciated. For those interested, a ...

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

Create a layout with three columns, each containing four list items

My unordered list (ul) has 4 li's and I'm trying to create 3 columns. However, when I have 4 li's, it only displays as 2 columns. How can I achieve a layout with 3 columns and 4 li's? Additionally, I want the li elements to be arranged ...

Enhance Your File Uploads with Custom Images in Bootstrap

For the file upload buttons, I have used the given image by customizing the button look using Bootstrap 3. Here is an example of how I achieved this: <label class="btn btn-primary" for="my-file-selector"> <input id="my-file-selector" type="fi ...

Aligning variable width numbers within a div container

Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits. When displaying a sing ...

The Bootstrap accordion-toggle incorrectly displays the content symbol (+/-) upon initial page load

Hey there, I've implemented the accordion-toggle code below on my visualforce page. Everything is working smoothly with the collapsible toggle, except for one issue. When loading or refreshing the page for the first time, the collapsed panel shows the ...

Implementing a feature to add selected checkboxes and remove unselected checkboxes with PHP and MySQL

I am currently working with 3 tables in my database: product, category, and product_category. I am in the process of creating a form that allows users to edit (insert/delete) categories for a specific product. My challenge lies in inserting an array of che ...

Utilizing partials in EJS for efficient HTML tag insertion

(1)home.ejs without using partials https://i.stack.imgur.com/3ozQQ.png (2)the output includes html tag, head tag and body tag https://i.stack.imgur.com/1o9jy.png (3)when utilizing header.ejs as a partial in home.ejs including opening html and body ta ...

Displaying a Bootstrap button and an input box next to each other

Looking for advice on aligning or arranging a button and input box side by side in Bootstrap without grouping. I've searched online for examples, but they all involve grouping of elements. jsfiddle: https://jsfiddle.net/erama035/p9dagmL3/3/ <div ...

The alignment of my card icons changes depending on the size of the paragraph

Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...

The scrolling function of the jQuery UI select menu is not working properly on the Android browser

I am currently developing a mobile application that utilizes the jQuery UI select menu. The functionality works well, but I have encountered an issue with certain drop downs being too long to display properly. While my PC shows scrollable floating divs as ...

Dissipating visuals / Effortless website navigation

Do you have experience working with HTML or are you looking for specific code examples? I've noticed some websites with sliders that feature clickable images fading in as soon as the page loads. I tried searching for information on how to achieve thi ...

Adding border color and width to an ion-avatar element can be achieved by using CSS properties

I've been struggling to add a border color and width to an ion-avatar element in Ionic 4. I've attempted to use various CSS3 code snippets, but nothing seems to work. This is what I have tried: .ion-avatar img{ width: 90px !important; h ...

The Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...