Image that adjusts its size according to the device screen width while

My goal is to create responsive images with a fixed height.

Below is the HTML code I am using:

<div class="col-md-6">
   <div class="img">
       <img src="http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg">
   </div>
</div>
<div class="col-md-6">
   <div class="img">
       <img src="http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg">
   </div>
</div>

I have also included my CSS:

.col-md-6 {
   width: 50%;
   float: left;
 }

.img {
   overflow: hidden;
   position: relative;
   height: 290px;
}

.img img {
   max-width: 100%;
   min-width: 100%;
   min-height: 100%;
}

You can view the implementation on JSFiddle here: https://jsfiddle.net/23o81xrb/

The issue I'm facing is that even though the .img class has a height of 290px, the images are not adapting when the window size is reduced. I would like the images to maintain their 290px height and adjust in width like a "zoom" effect.

Apologies for any language errors, thank you for your understanding.

I would greatly appreciate any assistance provided. Thank you.

htmlcss

Answer №1

If you're looking to style your images using the img tag, you can achieve this by utilizing the object-fit property in CSS3. See an example below:

.col-md-6 {
  width: 50%;
  float: left;
}

.img {
  overflow: hidden;
  position: relative;
  height: 290px;
}

.img img {
  max-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

This solution should effectively address your issue.

Answer №2

If you're seeking to achieve a zoom effect with a fixed height in img tags, the task may prove to be challenging!

However, by utilizing your images as backgrounds, it becomes possible to fixate on the height and find a suitable solution that meets your requirements. Here's an illustration:

.col-md-6 {
  width: 50%;
  float: left;
}
.img {
  overflow: hidden;
  position: relative;
  height: 290px;
}
.img.first {
  background-image: url('http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.img.second {
  background-image: url('http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.img img {
  max-width: 100%;
  min-width;
  100%;
  min-height: 100%;
}
<div class="col-md-6">
  <div class="img first">

  </div>
</div>
<div class="col-md-6">
  <div class="img second">
  </div>
</div>

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

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

javascripthtmlnode.jsmacoselectron

Ways to modify the cursor of a disabled ImageButton on an ASP.Net webpage

Within a ListView, I have dynamically generated ImageButtons. If an image does not have a link, I want to make it disabled. In the ItemDataBound event, I attempted the following approach: img.Enabled = False img.DescriptionUrl = "javascript:void(0);" img. ...

htmlasp.netcsscursorimagebutton

"Emulate the social sharing capabilities of CNET with interactive share

I remember a while ago, CNET had these amazing Social Share buttons that, when clicked, would reveal a "dropdown box" with the social network share dialog. Does anyone know how they achieved that? I've searched but couldn't find any information ...

javascripthtmluser-interfacesocial-networking

Having difficulty handling text overflow in Angular4 and HTML

I'm facing an issue with displaying a very large text in a table. Despite trying various attributes such as - { text-overflow: clip; } { text-overflow: ellipsis; } { text-overflow: ellipsis-word; } { text-overflow: "---"; } { text-overflow: ellip ...

htmlcssangular

Images displayed using jQuery do not fade into view

I have a collection of JSON image URLs that I am using to populate a div with a variety of images. Initially, the images are set at opacity 0 and should gradually fade in through a for loop. Here is the jQuery code snippet: $.ajax('http://example.co ...

jqueryhtmlcss

Storing information when an object is indexed in a for loop, to be retrieved later when

My JavaScript code includes an AJAX call that takes user input from a form and uses it to search for a JSON object. The matching objects are then displayed in a datalist successfully. Everything is working well so far, but now I want to extract specific f ...

javascripthtmljsonajax

Establishing connections between HTML and CSS files

After writing my html and css code, I noticed that the files are not linking properly. Despite checking for errors, I couldn't find any issues within the codes. Here is a snippet of my html file: <!DOCTYPE html> <html lang="en" dir= ...

htmlcss

Multi-object retrieval feature in Material Dialog

I am encountering an issue with Material Dialog when confirming the action to "remove row" in a table. Initially, removing from the dialog works fine and deletes a row. However, after closing the dialog and re-calling it for the second time, the removal ac ...

javascripthtmlmaterial-designmaterial-ui

Trouble with CSS transitions not functioning while altering React state

Each time a user clicks on an accordion, the content should smoothly show or hide with a transition effect. However, the transition only seems to work when opening a closed accordion, not when closing an already open one! To get a clearer idea of this iss ...

javascriptcssreactjsnext.jssass

An HTML attribute that functions like autofocus in the select tag

Is there a way to set the default focus on a select tag in HTML, similar to how autoFocus works for textboxes? I am looking to make a select tag automatically focused when the page loads. Is there a method to achieve this? ...

html

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

Having trouble accessing the menu in the dropdown div when clicking back?

I am working on creating a menu that drops down from the top of the page using JQuery. I have everything set up with the code below: <div id="menu"> <div id="menucontentwrapper"> <div id="menucontent"></div> </di ...

javascriptjqueryhtml

Handling 404 errors in Nginx when using try_files directive for .html files

When presented with this SEF URL /attrazioni/madame-tussauds-londra.html, I am required to retrieve the actual URL which is /index.php?q=/attrazioni/madame-tussauds-londra.html I currently have a directive in place, however, it functions correctly only fo ...

phphtmlnginxurl-rewriting

What is the best way to ensure a div container fills the entire height of the screen?

I am currently working on developing my very first iOS HTML5 app, which is a simple quote application. One challenge I am facing is how to set the height of my container div to match that of an iPhone screen. You can view the design I have so far on this j ...

htmlcss

Tips for changing between two texts within a button when clicked

Seeking a solution for toggling between two different texts inside a button when making an ajax call, with only one text displayed at a time. I'm facing difficulty in targeting the spans within the button specifically. Using 'this' as conte ...

javascriptjqueryhtmlcssajax

Transferring information from an HTML webpage to a PHP file and then redirecting to the homepage

My goal is to post the data to datahouse.php, which will then submit the data to the server and redirect to the Index page without displaying the datahouse.php file on the page. register.html <form method="POST" action="DataHouse.php"> <input ty ...

phphtml

Different from SimplyScroll but with added functionalities

Searching for a replacement for the now deprecated SimplyScroll with specific features. I am in need of a continuous, automatic carousel of boxes/images that halts when hovering over with the mouse (a feature SimplyScroll possesses), and allows movement ...

javascriptjqueryhtmlcarousel

What is the best method to apply a background image in HTML that functions properly in Internet Explorer?

Having trouble getting this CSS code to work in Internet Explorer. Need a solution that is compatible with IE for setting the background. body { background: url("images/Login-BG.png") no-repeat center center fixed; -moz-background-size: cover; -webkit ...

htmlcssinternet-explorer

ng-init assign value to a new object

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl2" ng-init="person = new Person('Al ...

javascripthtmlangularjs

Horizontal navigation bar encroaching on slideshow graphics

I'm encountering difficulties aligning the horizontal menu below the image slider. When I have just an image without the slider, the menu aligns properly (vertically), but as soon as I introduce the code for the slider, the menu moves to the top and d ...

javascriptjqueryhtmlcss