Seeking assistance with images for a website

Question

Seeking assistance with images for a website

I'm currently working on a school project where we are creating a website. However, I've encountered an issue with an image. It's a bit difficult to explain, so I've uploaded a video to help illustrate the problem. Essentially, I want the image to maintain its width when the height is adjusted. Currently, when I resize the window and the height changes, the image width also changes, resulting in a distorted appearance. Please watch this video to see the issue for yourself: https://www.youtube.com/watch?v=9ybm9rlast0

I would like the image to function similar to how images work in Gmail. Thank you in advance for your help!

html css image height width

Answer 1

Answer №1

Here is a demonstration of the typical implementation of responsive images.

/* Example of responsive image CSS */
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.container {
  width: 75%;
}
.left,
.right {
  float: left;
}
.left {
  width: 40%;
}
.right {
  width: 60%;
}

<div class="container">
  
  <div class="left">
    <img src="http://placehold.it/600x300/fc0/">
  </div>
  
  <div class="right">
    
    <p>
      Black jack lateen sail fire in the hole Arr coxswain topgallant Gold Road sloop lugger cackle fruit parley spanker. Fathom barque fore tackle fluke Shiver me timbers Sea Legs overhaul long clothes fire in the hole furl Admiral of the Black. Lateen sail rum capstan tack provost swing the lead scurvy overhaul cutlass dance the hempen jig tackle bilge rat.
    </p>
    
  </div>

</div>

Answer 2

Here is a demonstration of the typical implementation of responsive images.

/* Example of responsive image CSS */
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.container {
  width: 75%;
}
.left,
.right {
  float: left;
}
.left {
  width: 40%;
}
.right {
  width: 60%;
}

<div class="container">
  
  <div class="left">
    <img src="http://placehold.it/600x300/fc0/">
  </div>
  
  <div class="right">
    
    <p>
      Black jack lateen sail fire in the hole Arr coxswain topgallant Gold Road sloop lugger cackle fruit parley spanker. Fathom barque fore tackle fluke Shiver me timbers Sea Legs overhaul long clothes fire in the hole furl Admiral of the Black. Lateen sail rum capstan tack provost swing the lead scurvy overhaul cutlass dance the hempen jig tackle bilge rat.
    </p>
    
  </div>

</div>

Answer 3

Answer №2

To address your concern, I recommend utilizing the background-size: cover; property for an effective solution. Start by creating a designated element to display your desired image. In this example, I have chosen to use a div with a specific id for styling purposes.

<body>
    <div id="custom-image"></div>
</body>

Next, within the header section, include the following code:

<head>
    <style type="text/css">
        #custom-image{
            background-image: url("insert-image-url-here"); /*insert image URL here*/
            background-size: cover;
            height: 500px; /*desired height*/
            width: 50%; /*desired width*/
        }
    </style>
</head>

I hope this solution proves to be helpful for your needs!

Answer 4

To address your concern, I recommend utilizing the background-size: cover; property for an effective solution. Start by creating a designated element to display your desired image. In this example, I have chosen to use a div with a specific id for styling purposes.

<body>
    <div id="custom-image"></div>
</body>

Next, within the header section, include the following code:

<head>
    <style type="text/css">
        #custom-image{
            background-image: url("insert-image-url-here"); /*insert image URL here*/
            background-size: cover;
            height: 500px; /*desired height*/
            width: 50%; /*desired width*/
        }
    </style>
</head>

I hope this solution proves to be helpful for your needs!

Seeking assistance with images for a website

Answer №1

Answer №2

Similar questions

The combination of Chromium, raw HTML pulled directly from a C# string, and Angular leads to issues when trying to implement routing

Switch up the like button for users who have previously liked a post

Ensure the footer remains at the bottom of the page even with changing

JavaScript function for submitting form data using AJAX and performing validation

Stylized border on grouped sections

Creating a radial gradient texture using CSS

disable full page scrolling on iOS devices

Concealing choices that have already been chosen in a ReactJS select dropdown menu

The synchronization issue between ng-class and animation

Using HTML5 and CSS transitions to scale an image within a 960 grid layout

Background misalignment issue in Internet Explorer 6

Show content to the right side of the division element

What is the process for creating a fade out effect with JavaScript?

Tips for adjusting the size of a dropdown arrow icon

Iterate through three images using the `background-image` property in my Div

Disappearing Act: The vanishing act of Bootstrap 4 navbar

What is the best way to make a flexbox stretch to fill the entire screen

Modern design featuring soft borders that blend into the background

Verify the level of opacity in the image

Scrapy and Python data gets corrupted by <br> tags causing issues