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

Issue with CSS elements unable to shift to the left

My attempt to align CSS elements to the right using margin-right: 200px is not working, while margin-left: 200px does. This issue arises even though my CSS file appears as follows: .wrapper { display: inline-block; position: abso ...

DIV collapsing in reverse order from the bottom to the top

Looking for some help on how to create two links that, when clicked, will scroll a hidden <div> up to fill the full height of its parent container. I've been having trouble with the element using the full height of the <BODY> instead. ...

Transferring data between two HTML files through the POST method

Is there a way to pass two values (parameters) from one HTML page to another without displaying them in the URL, similar to using the POST method? How can I retrieve these values on the second HTML page using JavaScript, AJAX, or jQuery? For example: cli ...

When the input field is not selected, switch it to display as plain text

I have a table where the cells become editable when clicked on by a user. I want the editable area to revert back to plain text with the updated value once the user deselects the text field. Is it possible to utilize AJAX to update a database with the new ...

Is there a way to change the border property of an element when clicked, without causing the displacement of other elements?

I'm in the process of creating a webpage where users can choose the color and storage capacity of an item. Only one color/capacity can be selected at a time, and once chosen, it should be highlighted with a border. The issue I encountered is that whe ...

Retrieving the Href attribute from a designated div class with JQuery

I'm currently developing a Google Chrome extension where I need to extract the source code of a webpage using a jQuery get function. Here is how I implemented it: $.get(link,function(data){ // The entire source code of the link will be stored in the ...

The bootstrap table did not meet my expectations as I had hoped

I am currently using Bootstrap to create a basic two-column table similar to the one on the Bootstrap website here: http://getbootstrap.com/css/#tables. To achieve this, I have implemented a javascript function to display the table as shown below: $(&bso ...

Seamless flow from one image to the next

I'm working on a project with a slideshow, but I've noticed that when it transitions between images, it can be quite abrupt. I'd like to find a way for it to change smoothly from one image to the next. <div> <img class="mySli ...

What is the best way to insert fresh input values into a different element?

click here to view image description I am working with an input element where I take input values and store them in an element. However, I would like to know how to input new values into the next element. Any assistance would be greatly appreciated. Thank ...

Tips for creating responsive images when using two images stacked on top of each other:

One of my challenges with using Bootstrap is trying to place an image on top of another image. Here's the HTML code I currently have: <section id="test"> <div class="row"> <div class="imgbg"><img src="img/bg_pres.png ...

Footer that sticks in a vuejs application

I am facing a challenge in implementing a sticky footer in my vuejs application. Vuejs and similar frameworks require the presence of a root element in the template. This requirement is causing complications when trying to use Flex to create a sticky foo ...

What is the best method for converting a variable with HTML content into a printable string?

In an attempt to display user-entered data from a text box to an HTML div, there seems to be an issue when the data contains HTML content. Instead of displaying the content as a string, it shows it as HTML elements. For example: let text = "<h1>Worl ...

Establishing the Default Volume within a script

I'm looking to adjust the default volume of music on my website. Currently, it plays too loudly on load, but I have a slider bar that allows users to change the volume. How can I set the default volume to be 25% of the slider? CHECK OUT MY WEBSITE! ...

"Engaging with the touchscreen inhibits the triggering of click

Within this div, I have implemented touch-action:pan-y;. Surrounding this div is an anchor tag. If you click on the div, the link will successfully redirect. However, if you swipe on the div and then click, the link won't work on the first attempt bu ...

I am encountering difficulties in accessing my component's property within the corresponding template while working with Angular 5

When I call an HTTP POST method to retrieve table names from the backend, I attempt to display them in the template using ngFor. However, the table names are not appearing on the screen. The tNames property is inaccessible in the template. As a beginner i ...

What is the best way to extract the numerical value from a JavaScript object?

I'm currently working on a web form for a currency exchange demonstration. I have included a snippet of HTML and Javascript code that I have initially implemented. <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...

Creating custom designs for Material UI components

Although not a major issue, there is something that bothers me. I am currently using react, typescript, and css modules along with . The problem arises when styling material ui components as I find myself needing to use !important quite frequently. Is th ...

Servlet unable to retrieve parameters from Form due to unexpected NULL values

Here is a basic form element for you to review: <form action="Test" method="POST" enctype="multipart/form-data"> <input type="text" name="first_name" title="First Name"></input> <input type="text" name="last_name" title="Las ...

How can the data from a factory be utilized within the same controller but in a separate file in an AngularJS application?

When trying to route from home.html to profile.html, there seems to be an issue with the execution of the profile.js script. I have data in script.js that is written in a factory. When the profile button is clicked, the page routes to profile.html, but the ...

CSS compatibility across different browsers

Check out my jsFiddle for an example of an onHover event that changes the image. It's working perfectly in chrome, but not quite right in firefox. Any suggestions on how to fix it? Here's the jQuery function I'm using: $(document).ready(fu ...