What is the best way to resize the image to fill half of the screen?

I am trying to make sure that the image fits 50% of the screen height of the device and not just 50% of the current screen size, which may have been minimized by the user. I also want the image to stay fixed in size even when the user resizes the screen.

Since the image is quite large, I want to crop it rather than resize it. Here is what I have tried so far:

home.html:

<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>      
<img class="image" src="myimage.jpg" alt="">
</body>
</html>

home.css:

html, body {
margin:0;
border:0;
padding:0;
}

img.image {
width:100%;
}

I am looking for a solution using only HTML, CSS, and JavaScript. Can someone please help me understand how to achieve this in CSS? Thank you!

javascripthtmlcss

Answer №1

If you're looking to enhance your website's design, exploring the benefits of the css clip property could be a game-changer.

By incorporating clip alongside some clever JavaScript that can determine screen size, you might discover the perfect solution for optimizing user experience.

Answer №2

To adjust the size of the image, you will require a container with overflow:hidden. DEMO for illustration :

html, body {
  height:100%;
  margin:0;
}
.crop50h {
  height:50%;
  overflow:hidden;
}
/* custom styles for the image */
.crop50h {
  text-align:center;
}
.crop50h img {
 /* width:100%;  ? */
  margin:0 -100%;
  min-width:100%;
}

Usage example in HTML :

<div class="crop50h">
    <img src="http://lorempixel.com/1200/1200/" alt="Sample Image"/>
</div>

Answer №3

It seems like you're looking to adjust the image size to occupy 50% of the desktop window, not the browser window as per your question.

If that's correct, you can utilize JavaScript and the window.screen.availHeight property to determine the available height:

var half = window.screen.availHeight / 2;
var image = document.getElementsByClassName("image")[0];

image.width = (half) + "px";

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

Automatically scrolling down with Vue3 and Ionic: A seamless scrolling experience

In the process of developing a VueJS App with Ionic, there is a Chat feature involved. It is crucial for users to view the latest message first and not the oldest one, so it is necessary for the app to open with the container scrolled to the bottom. Additi ...

javascriptvue.jsionic-frameworkchathorizontal-scrolling

Every checkbox has been selected based on the @input value

My component has an @Input that I want to use to create an input and checkbox. import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'app-aside', templateUrl: './aside.component ...

javascriptangulartypescript

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

Transferring an email containing an HTML file along with embedded images

Is there a way to send HTML emails with images using C#? Can I simply insert a direct link to an image hosted on my server (similar to <img src="http://mysite.ru/img.png" />) or do I need to attach the image and then use a link to the attached file ...

c#htmlemail

Svelte language switcher experiencing technical difficulties

Currently delving into Svelte 3, I embarked on a project intended to be shared on GitHub in English. However, I realized that some of my friends do not speak English. To accommodate different language preferences, I decided to create a language switcher. H ...

javascripttypescriptsvelte-3

Utilizing VueJS, Webpack, and the Power of Video

I'm running into an issue when attempting to use vue-cli with the webpack-simple template. Upon importing my video file: <video src="./assets/twp-logo-video.mp4" id="initial-logo" type="video/mp4"><!-- 700 x 700 --> </video> I en ...

javascriptwebpackvue.jsvuejs2

Having trouble executing cucumber tests using protractor

Whenever I run my tests, I keep encountering the error: TypeError: e.getContext is not a function I am utilizing examples from https://github.com/cucumber/cucumber-js, making some modifications in world.js (to resolve timeout issues) Application versions ...

javascripttestingprotractorcucumberjs

When the height of a sibling element restricts the inner content and scroll bar due to the parent element's height being defined in vh

I'm currently working on creating a sidebar that occupies a fixed percentage of the viewport. Inside this sidebar, I want to have an element that remains fixed at the top while allowing the rest of the content to scroll if it exceeds the height of the ...

htmlcss

Although AJAX $.post functions properly in the View, it seems to encounter issues when relocated to a separate .js file. Interestingly, all other JQuery functions work

I have recently delved into MVC, JQuery, and AJAX, and encountered a perplexing issue. After completing the initial development of a practice website, I dedicated time to enhance the interactivity using JQuery. Everything was functioning smoothly until I ...

javascriptjqueryhtmlajaxasp.net-mvc-5

PHP move_uploaded_file() function encountering an issue

As a newcomer to PHP, I am exploring the move_uploaded_file() function. I initiate an HTTP POST request from JavaScript/jQuery to a PHP file hosted on a Microsoft Azure server. The request includes an audio blob like so... mediaRecorder.ondataavailab ...

javascriptphppostxmlhttprequest

Unable to attach eventName and callback to addEventListener due to the error message stating 'No overload matches this call'

I am attempting to attach an event listener to the input element stored within a class method. This method takes a props object containing eventName and callback. public setTextFieldInputListener({ eventName, callback }: TextFieldListenerProps): void { ...

javascripttypescriptevent-listener

Determining the spatial location of an object in Three.js in relation to the camera for the purpose of creating a trail

In my scene, I have an object (a pen) that rotates around its axis in the render loop using the following code: groupPen.rotation.y += speed; groupPen.rotation.x += speed; Additionally, I have a TrackballControls that allows the user to rotate the entire ...

javascriptthree.js

Firebase Error: In order to deploy without hosting via source, options must be provided. (app/no-options)

After developing a Next.js application, I integrated Firebase authentication and utilized the useContext hook for managing user state throughout the app. Here's the snippet of code for the AuthContext: auth.js import { createContext, useState, useEff ...

javascriptfirebasenext.jsfirebase-authenticationreact-context

Ways to adjust the size of v-btn

Objective: My current task involves enhancing the customization options for Vue components, specifically focusing on adjusting the size of a button component based on user input. Our project utilizes Vuetify. Previous Code: <v-btn @click.prevent=&quo ...

htmlvue.jsbuttonvuetify.js

How do you invoke a function from within another function in AngularJS?

I'm facing an issue with a function that needs to be called every time a page is loaded. I attempted to achieve this by using the following code: callFunction(); function callFunction(){ $scope.onClickModel(); } ...

javascriptangularjsmean-stack

Implementing event listener for component generated by mapping function

I am using the map function in Javascript to render a list, but I am struggling to add a click listener to the elements in that list. Check out the code here - https://codesandbox.io/s/oqvvr1n3vq My goal is to log Hello to the console whenever the h1 tag ...

javascriptreactjs

Ways to identify a disconnected RTCPeerConnection

Currently, I am exploring a WebRTC demo on my Chrome browser and have successfully set up a video conference. However, I am facing an issue when one of the peers disconnects, such as refreshing the browser. I am unsure how to detect this disconnection on t ...

htmlwebrtc

Populating container with video element

I have divided my page into 4 quadrants using viewheight and percentage widths, which has been successful. Now, I want to insert a video in each div that can responsively fill its parent div. When I assign width: 100% to the video, it causes some alignmen ...

csshtml5-video

The error encountered with react createRef was caused by a faulty implementation

Here is the revised question post completing the answer In this particular code snippet, I have encountered an issue where my file browser opens correctly upon submission, however, the updated state is not reflected when I click the final submit button. ...

javascriptreactjscreate-ref

Numerous navigable tabs all on a single page

After following a tutorial on YouTube to create scrollable tabs, I successfully implemented it using Bootstrap 5. However, I'm facing challenges in getting multiple scrollable tabs to function on a single page. Although the tabs and tab-content are fu ...

javascriptbootstrap-5