What can I do to prevent my CTA image with a width of 100% from distorting when I change the height?

Creating a website and in need of a CTA image? Utilizing Bootstrap 4 along with custom CSS to tweak the appearance, I've set it to occupy the entire width of the screen using width: 100%;. As the screen size changes, the image remains responsive, adjusting to fit the screen accordingly. However, on larger screens, the image fills the entire website, resulting in an oversized height that is less than ideal. How can this be resolved?

Below is the HTML section:

<!-- CTA Section -->
    <div class="img-wrapper">
        <img class="img-responsive" src="I/CTA.png">
        <div class="img-overlay">
            Interested in discovering more of what we offer? 
            <br><br>
            <a href="coffee.html"><button class="btn btn-md btn-primary">
             Click here</button></a>
        </div>
    </div>
<!-- /.img-wrapper -->

And here is the corresponding CSS snippet:

.img-wrapper {
position: relative;
 }

 .img-wrapper img {
    width: 100%;
    max-height: 650px;
 }

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 2px;
  color: white;
  font-size: 14px;
}

.img-overlay:before {
  content: ' ';
  display: block;
  height: 60%;
}

button {
    font-family: 'Raleway', sans-serif;
    letter-spacing: 2px;
}

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) { 
    /* matches 'btn-xs' */
    .btn-responsive {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}

Answer №1

To address the issue of browser support for object-fit, a solution utilizing background-image may be necessary based on your required browser compatibility.

One way to implement object-fit is demonstrated below:

.img-wrapper img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
}

Check out the Fiddle demo for reference.

Here's an alternative using background-image:

A technique to ensure proper display involves setting the image size with visibility: hidden while keeping it in place, allowing the background image to adjust without distortion.

View the Fiddle demo to see this in action.

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

Apply pointer style to the CSS only when a division contains text

If there is plain text inside a div with class="x95qze", how can we add cursor:pointer only to the second div that contains the text Cursor pointer required here. The div with class="x95qze" will not change. The content of the div may ...

Content for Bootstrap carousel items can be divided into two separate divs arranged horizontally

I'm currently working with a bootstrap carousel that displays images and text on each carousel item. However, I want the content of each carousel item to be displayed horizontally, rather than vertically as shown in the image below. Here is the curre ...

Is it possible to have square corners on the Vuetify Mobile Drawer component?

Currently, I am working with the Vuetify mobile drawer component and my goal is to give it square corners instead of the default rounded corners that are prevalent in Material design for all Vuetify components. While the Vuetify card component offers a " ...

Guide on clicking an element in selenium that has an href attribute of "javascript:void(0)" when the element is not attached to the page document

This is the web page HTML structure that caught my attention. <div class="paging"> <a href="javascript:void(0)" id="pcPaging1" class="active">1</a> <a href="javascript:void(0)" id=" ...

Ways to embed external HTML into my .aspx page using a JSP+JSTL alternative

Currently, I am working with JSP+JSTL (Java) to add some HTML to a webpage: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="caasPath" value="http://wwww.MyExampleSite.com/header/default"/> <c:import url="${caas ...

What are the steps to create a reliable menu?

Looking to add a fixed menu to my website that stays at the top even when scrolling down the page. For an example, check out iplex.co.in for a demonstration. ...

Unable to change background image using jQuery

Snippet: const imageUrl = 'img/star.png'; $("#venueId-"+nodeId).css('background','url("'+imageUrl+'") no-repeat top right'); This piece of code is the start of a function that triggers upon clicking. The goal is to ...

What is the best way to manage the appearance of multiple elements in React simultaneously?

I have a fun little game that I've been working on. Check it out - here In my game, when you hover over a square, it turns blue. If you hover over it again, it turns white. I achieve this by applying styles to the event target on hover. const handleM ...

Issue with footer not properly aligning on the page's bottom

In my current project, I am utilizing both angularjs and node js for development. Within my index.html, the views are being called in the following manner: <div ng-include="'views/header/header.view.html'"></div> <div ng-view styl ...

Issues arise when the sub-menu does not function properly and overlaps with other elements of

I've been working with a client on their website and encountered an issue. On the mobile version of our menu, when I hover over a menu item that has several sub-menu items, those items display properly, but there is an element below them showing thro ...

Using simpleXML to extract HTML code from an XML document

Presented below is content extracted from an xml file: <Cell> <Comment ss:Author="Mark Baker"> <ss:Data xmlns="http://www.w3.org/TR/REC-html40"><B><Font html:Face="Tahoma" html:Size="8" html:Color="#000000">Mark B ...

What is the best way to separate one dropdown area from another dropdown area?

I have two dropdown menus where, when an option with the value "other" is clicked, it generates a text area just below the dropdown menu. Both sections are functioning correctly, but I had to create separate parent wrappers for each in order to do so. How ...

The hover effect and image opacity adjustment seem to be malfunctioning in my HTML/CSS code

Currently, I am in the midst of a web project and my goal is to implement a hover effect on the first card containing an image. The desired outcome is for the card to move upwards upon hovering, allowing the image to become fully visible with an opacity se ...

Assign a specific style to Fancybox links and buttons for managing the functions of 'next', 'previous', and 'close'

Utilizing the following jQuery script to hide a div whenever anything that does not have the class 'click' is clicked (used for empty space and certain other divs). $(document).click(function (event) { if (!$(event.target).hasClass('cli ...

I must update a bootstrap class name within multiple layers of divs by referring to the parent class

My code structure is set up like this: <div id="main-parent"> <div class="child2"> <div> child2 </div> </div> <div>child3</div> - - - - <div class="ch ...

Strategies for Displaying Additional Years in a Datepicker

Currently, I am utilizing the bootstrap datepicker on my website. However, I have noticed that when I open the dropdown to change the year, it only displays a range of 20 years - the current year, along with 10 years before and after. I would like to modi ...

Challenges Arising from the Reflection of Vectors in Particle Collisions

Could there be a potential math error in my particle collision simulation that I created? You can find the simulation here. The issue seems to be with the separation of particles during collision resolution. Below is a snippet of the code where particles ...

Tips for displaying a checkmark icon once an image has been chosen

When selecting images one by one and highlighting them with border:2px solid #b404ae;, I want to place a tick image at the bottom of the selected images. However, my attempt was unsuccessful as only the border color is showing. Can anyone provide me with a ...

Execute CSS within jQuery code only when the body class is present

I am attempting to use CSS (display: none;) within a script to hide elements from my menu only if a specific language is active. When the body class changes from one language to another, I want the script to check if the body class of a certain language ...

Glide your cursor across a different division as it approaches

Whenever I hover over "Div2", I would like the hover effect of "Div1" to be triggered .Div1:hover{ background:green; } <div class="Div1">Greetings!</div> <div class="Div2">Welcome!</div> ...