What is the best way to resize an image to fit neatly within a specified frame?

In my CSS, I have implemented two breakpoints:

  • For iPhones: Only the resume content should be visible without any image - this is working fine.
  • For desktops: The image should be aligned to the left side of the resume content. However, I am encountering an issue where only a part of the image is shown and the image and content are not placed next to each other.

I would appreciate suggestions on alternative solutions besides splitting the <section>. As the image is stored locally, I have attached a screenshot below:

https://i.sstatic.net/zTrn5.png

Below is the code snippet:

htmlcss

Answer №1

It seems like the issue here lies in conflicting intentions, making it difficult to provide a solution.

On one hand, there is a desire for the image to fill the entire height of the screen, evident by using height: 100vh;. On the other hand, there is a preference to view the image in its entirety without being covered up. Achieving both full height and visibility may require squishing the image horizontally.

Consider whether you prioritize having the image covered or maintaining its natural aspect ratio when the screen size decreases. Avoiding distortion should be a priority.

If sacrificing some height is acceptable, consider separating the image and text elements and assigning them percentage-based widths.

Answer №2

To enhance the layout of your HTML, I recommend swapping the positions of the classes 'background' and 'container'. Then, adjust the CSS to specify the percentage position of each class relative to the body element and remove the height property from the 'background' class. As a beginner, I hope this suggestion proves helpful. If not, please feel free to let me know.

<body>
  <div class="container">
    <section class="picture">
      <div class="intro">
        <h1 class="hidden">Hello, I'm Jenna!</h1>
        <h1 class="hidden">I make <em>websites</em>.</h1>
      </div>
      <div class="background">
      </div>...
</body>

by

<body>
  <div class="background">
  </div>
  <div class="container">
    <section class="picture">
      <div class="intro">
        <h1 class="hidden">Hello, I'm Jenna!</h1>
        <h1 class="hidden">I make <em>websites</em>.</h1>
      </div>...
  </div> 
</body>

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

Tips on creating a button that, upon clicking, triggers the download of an Excel file using PHPSpreadsheet

I am trying to figure out how to create a button that, when clicked, will download an Excel file named b1b5.xls with some specified values added. Here is the code I have so far: <html> <head> </head> <body> <center> < ...

javascriptphphtml

Tips for creating a textarea element that resembles regular text format

I am working on creating an HTML list that allows users to edit items directly on the page and navigate through them using familiar keystrokes and features found in word processing applications. I envision something similar to the functionality of To achi ...

javascripthtmlcss

I'm having trouble getting Select2 to work

I've been experimenting with Select2 and following the instructions on their website (). I tried adding the URI to my HTML file and created a basic dropdown menu for selecting two states. However, when I tested it, Select2 didn't seem to work at ...

javascripthtmlajaxjquery-select2

Pressing a key once causing two actions when managing content in a separate window

Issue: I am facing a problem where I receive double keypresses from one key event when the event updates content in two separate windows. (Please keep in mind that I am not an expert in this field and appreciate your understanding.) I am attempting to use ...

javascriptjqueryhtml

Hide the <footer> element unless there is extra space

I am trying to create a footer that only appears when the viewer has scrolled to the bottom of the page. This means that if you haven't reached the bottom yet, the footer is not visible. The concept seems simple enough, but as I am still in the learni ...

htmlcssfooter

Exploring the integration of PostgreSQL into JavaScript

As a beginner in JavaScript, I am looking to create a web page that can store data in a database. Can anyone provide guidance on what resources or materials I should study to learn more about this process? ...

javascripthtmlmysqlnode.jspostgresql

Images inside columns are not being properly displayed in a PHP for loop when using Bootstrap

I have created a bootstrap page in which I am attempting to showcase images inside bootstrap columns. Below is the code snippet that I have used: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset ...

htmlcssimagebootstrap-4width

The information is failing to display properly within the mat-menu

Recently, I've been working on creating a navbar that includes a submenu. Even though the navigation bar data is loading properly, I am facing some issues with the submenu functionality. As a beginner in this area, I would appreciate any help or guida ...

htmlangularangular-material

"Limitation observed - function operates only on first attempt

I have been working on a map project that involves pulling information from Google about various locations using the library available at https://github.com/peledies/google-places In order to troubleshoot and identify the issue with the code related to ma ...

javascriptjqueryhtmlfunctiongoogle-maps-api-3

Creating dynamic charts in Javascript using Firebase

My dad recently asked me to enhance our motor home by integrating an Arduino with Firebase to monitor the water and propane tanks. He's hoping to be able to check tank levels from his phone so he can see when they need refilling. I've successful ...

javascripthtmlfirebase

Using @at-root seems to be causing an error when combining the "a" selector with

I encountered an issue when attempting to use @at-root and Interpolation in my Sass code. Despite using a standard example for testing, I still receive an error: .button { @at-root a#{&} { color: green; } } Error sass/Site.scss (Line 28 of s ...

cssrubywindowssasscompass

Guide to Positioning Pre-Loader in the Center on Mobile Devices

Despite trying numerous solutions, I'm struggling to center my pre-loader on mobile devices. It looks fine on desktop and mobile landscape orientations, but whenever I switch to mobile portrait, it just won't center properly. CSS: .load ...

javascripthtmlcsspreloader

Setting up VSCode for THREE.js development

Struggling with implementing my JavaScript code in VSCode, trying to move away from CodePen and use an actual code editor. Transition seemed simple but can't get it to work. Using the following files: test.html <!DOCTYPE html> <html> .. ...

htmlvisual-studio-codethree.js

Display a div using a PHP statement

I'm struggling to retrieve a specific div from my PHP function. Here is the code: error_reporting(E_ALL | E_NOTICE); ini_set('display_errors', '1'); require_once("./include/membersite_config.php"); if (!$fgmembersite->Chec ...

phphtml

Is it possible to alter the color of a parent's pseudo-element when it is focused using CSS3?

This situation is quite challenging, and I believe achieving it with plain CSS3 alone is difficult (easier with jQuery, but I'm trying to avoid that). Are there any potential workarounds or hacks? My main goal is for it to be cross-browser compatible ...

csscolorspseudo-element

Troubleshoot: Font Rendering Issue with CSS3 @font-face in Opera 11.x

Having some trouble with Opera not displaying my HTML5 site correctly. Everything looks good in Safari, Chrome, IE9, Firefox 3.5+ and more. Wondering if anyone has encountered this before and found a solution. Here's the breakdown of my setup: In the ...

cssoperafont-face

In the realm of web development, the Phoenix library introduces the concept

Is there a way to combine a dynamic classname and a static one effectively? <div class=<%="#{getClass(app.status)} two" %> What happens is <div class="one" two> Instead of the desired output of <div class="one t ...

htmlelixirphoenix-framework

Content on Google sites filling the entire screen space

My current project involves creating a webpage on Google Sites for school. However, the site's appearance is not what I intended. Instead of displaying as I designed it, the page has extra elements that were added automatically by Google Sites. Is the ...

htmlcssgoogle-sites

Adding icons to form fields based on the accuracy of the inputs provided

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Bui ...

javascripthtmlcssformsicons

Is there a way to include text in a video similar to the style used by PayPal?

PayPal uses the tagline "You Make it, We'll Pay It" displayed on top of a video with a subtle play button located in the corner. By clicking this play button, the video initiates playback and smoothly transitions from a dark overlay to the video itsel ...

javascripthtmlcssvideopaypal