Display the image in full screen using the img tag

Currently, I am utilizing the img tag to display images in my slider. To achieve the desired effect of having the image fill the entire width and height while being centered within its container, I am encountering some challenges.

The issue arises when I resize the window width as the image tends to shrink without adjusting its height proportionately to match the window's height. Essentially, what I require is for the image tag to behave similarly to background-size: cover.

background: url(../images/slider/002.jpg) center center;
background-size: cover;

Although I could resolve this by converting the image into a background element, it adversely affects the functionality of the slider. It is crucial for me to maintain the usage of the <img> tag for this purpose. You can view an example here.

htmlcssimageresponsive-designbackground-image

Answer №1

One way to ensure an image fills a div is by utilizing the object-fit property. Here's a simple example:

html,body{
    margin:0;
    height:100%;
}
img{
  display:block;
  width:100%; 
  height:100%;
  object-fit: cover;
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt="">

If you need broader browser support (such as for IE), consider this technique to center an image in fullscreen mode using the <img> tag:

  • Vertically and horizontally center with absolute positioning, negative top, bottom, left, and right values along with margin:auto;
  • Ensure image covers viewport entirely with 100% min-height and min-width

See DEMO here

html,body{
    margin:0;
    height:100%;
    overflow:hidden;
}
img{
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:-100%; bottom:-100%;
    left:-100%; right:-100%;
    margin:auto;
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt="">

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

Closing Note in Drupal

Is there a way to adjust the footer message in Drupal without logging into the dashboard? I've checked all the files in cPanel, but I can't seem to locate the actual HTML for the website. I am only able to customize the body content, not the fo ...

cssdrupalthemesbootstrap-4precision

Enhancing Fullpage.js with a custom scroll delay feature

One issue I'm having is with a fading div "box" using ".fp-viewing" as a trigger for the transition effect. The problem arises when the page begins scrolling upon .fp-viewing being activated, causing the box to scroll out of view before its animation ...

javascriptjquerycssfullpage.js

How to toggle the display of a div by its id using index in Javascript

Currently, I am encountering a problem with toggling the div containers. When I click on the video button, I want the other divs to close if they are already open. However, due to the toggling mechanism, if a div is closed and I click on the corresponding ...

javascripthtmlangular

Update the content of the widget

Currently, I am utilizing the following script to display NBA standings: <script type="text/javascript" src="https://widgets.sports-reference.com/wg.fcgi?script=bbr_standings&amp;params=bbr_standings_conf:E,bbr_standings_css:1&amp"></sc ...

javascripthtmlcsswidget

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

javascripthtmljquerycss

The expected outcome of the value display in CSS is not being achieved as anticipated

Here is some HTML code: <!DOCTYPE html> <html> <head> <title>Testing Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1 class="hid ...

htmlcss

How to apply a border to a CSS3 triangle shape

This is my unique code snippet CSS #page { width: 900px; padding: 0px; margin: 0 auto; direction: rtl; position: relative; } #box1 { position: relative; width: 500px; border: 1px solid black; box-shadow: -3px 8px 34px ...

cssanimationgeometryborder

A webpage specified with 'charset=iso-8859-1' accompanied by <!DOCTYPE HTML> is triggering a cautionary alert

After running the W3C validator on an HTML document, I discovered that using the following meta tag: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> in conjunction with: <!DOCTYPE HTML> results in ...

htmlcharacter-encodingdoctypew3c-validation

Guide to using jQuery to load an image

I am using this code to load an image and display it within a dialog box. <div id="image_preview" title="Client Photo Preview"> <p><img src="" alt="client image" id="client_image_preview" /></p> </div> $("#client_image_p ...

javascriptjqueryhtmlcss

jQuery code not being triggered on secondary page

I'm currently working on a website project for one of my university courses (Link: ) and I'm encountering an issue that I could use some help with. The problem involves a "back-to-top" button that uses jQuery to smoothly scroll the page upwards. ...

javascriptjqueryhtml

Unveil captivating HTML5/YouTube video as you scroll down the page

I am looking to create a parallax effect where a video is revealed on scroll. The video, currently embedded from YouTube but could also be in mp4/HTML5 format, should only appear once the user scrolls and text content moves to the top. Users should then ha ...

jqueryhtmlcssgsapscrollmagic

Leverage the functionality of Typo3 Powermail to automatically input form values from one page to another

I am currently developing a website with a simple form that includes an input field for entering an email address and a submit button in the footer. Clicking the button directs users to a contact page featuring a Powermail form, where the input field value ...

htmlformstypo3powermail

Tips for creating a dynamic sticky footer

Seeking out a solution for a sticky footer that adjusts its height based on the width of the browser. Creating sticky footers in flexible designs can be tricky. I've come across various suggestions, discussions, and fixes for implementing sticky foot ...

cssfluid-layoutsticky-footer

Utilizing Material-UI for CSS styling in a live environment

My application has a 'dashboard' feature that utilizes material-ui. Within this dashboard, other apps are called and rendered. While this setup functioned smoothly during development, I encountered issues once switching to a production build. The ...

cssreactjsmaterial-ui

A guide to spinning an image in every direction with CSS

I'm working on rotating an image in all directions using CSS and Vue.js. To demonstrate this, I have created a CodePen with the necessary code below. <div id="app"> <v-app id="inspire"> <div class="text-xs-center image-rotation" ...

htmlcssvue.jssass

Expansive visuals with the Masonry plugin

Looking to create a Masonry layout with images but running into the issue of large image sizes. Wanting to limit each image to 30% of the screen width while maintaining proportionate height. How do websites like Flickr and Pinterest handle this when uplo ...

jqueryhtmlcssjquery-masonry

What is the best way to utilize title tags without displaying the title when hovering over it?

I find myself pondering the purpose of title tags. I've diligently added them to every link on my website in hopes of boosting SEO. However, the excessive amount of title tags has made navigation a bit overwhelming. It seems like no matter where you h ...

htmlcssseouser-experience

Place a stationary element under another stationary element

I have a dilemma with two fixed elements on my website. One of them can toggle between display: block and display: none, while the other is always visible. I want both elements to stay at the top of the webpage without overlapping each other. I've co ...

javascriptjqueryhtmlcss

Vue.js error: Unable to locate requested resources

Recently, I've been encountering a curious issue when trying to access a specific component in my application. When I manually type the URL http://localhost:8080/detailed-support/start into the browser, the content loads without error. However, none o ...

javascripthtmlvue.js

Some of the Tailwind CSS colors may not be fully supported by Next.js for rendering

Don't forget to showcase all the amazing Tailwind CSS Colors, Sometimes they go missing unexpectedly, and only a few decide to make an appearance. I try to add them manually one by one, but sometimes they just don't show up on the map. Edit: ...

cssnext.jstailwind-css