What are the steps to reduce the height of the image by half?

I created a list of images and attempted to reduce the height of one particular image by half.

.img {
  background: #255;
}

img {
  max-width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/800x200/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/550x768/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

I utilized the transform property with scaleY(0.5) but noticed a gap between the image and text. I want to remove this space when adjusting the image height.

.img {
  background: #255;
  transform: scaleY(0.5);
  transform-origin: top;
  overflow: hidden;
}

img {
  max-width: 100%;
  transform: scaleY(2);
  transform-origin: top;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/800x200/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/550x768/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Why is there excess blank space despite setting the image height? How can I eliminate this extra space and display only half of the image's original height?

twitter-bootstrapcssbootstrap-4

Answer №1

I will address each of your inquiries sequentially.

What is the purpose of leaving the exposed area blank?

The "transform: scaleY" style is utilized to determine the height at which an element should be displayed on the screen, without adjusting the space allocated for that element. Essentially, it dictates displaying only a portion of the element's height, not resizing the element itself. Subsequently, by specifying "transform-origin: top," you indicate that the display should begin from the top of the element, resulting in a visible top half of both images.

The blank space corresponds to the part of the element designated to remain invisible. Although the complete image occupies that space, it remains hidden as per your instructions.

How can I eliminate the overexposed region?

To remove the exposed area, simply omit the "transform: scaleY(0.5);" from the .img class style. This action restores the original full height of the element. Retaining "transform: scaleY(2)" will double the img element's size within its parent container, while adding "overflow: hidden" will conceal the excess height.

Is there a way to display an image at half its height?

If you intend to exhibit only the top half of an image whose dimensions are known (e.g., 800x200 pixels), the code snippet provided below achieves this by setting the container's height to 100px and hiding the surplus portion. Additionally, the image won't resize beyond the container due to the max-width being set to 100%.

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

Bootstrap navbar toggler malfunctioning after initial click

I am experiencing an issue with my collapsed navbar in Bootstrap 4.3.1 & Rails 6. The hamburger button that appears on collapse is not clickable even after downgrading jQuery from 3.5.0 to 3.4.1 as recommended here. I followed the steps of removing jQu ...

jqueryruby-on-railstwitter-bootstrapbootstrap-4ruby-on-rails-6

Design a dynamic table using JavaScript

After spending hours working on my first JavaScript code, following the instructions in my textbook, I still can't get the table to display on my webpage. The id="eventList" is already included in my HTML and I've shortened the arrays. Here' ...

javascriptcssecmascript-6html

Sharing information between Angular controllers utilizing services

I am struggling with transferring data between controllers using a service. I expect that when the "send data" button is clicked, the information entered into the text field should appear in the Results controller. However, nothing seems to be showing up. ...

cssangularjsionic-framework

Unable to mark checkboxes in Bootstrap 4 Dropdown (triggered by vue.js) due to unresponsive behavior

When using Vue.js to open a Bootstrap Dropdown, I encountered an issue with selecting custom checkboxes within the dropdown menu. I have come across information about event.stopPropagation() potentially causing this problem, but I am unsure where to imple ...

vue.jsbootstrap-4dropdown

Set the image to be positioned absolutely on the entire screen

I'm trying to add a background image to the center of my webpage that spans the entire width of the browser. After finishing my page layout, I realized I needed to jazz it up by placing an image in the background. But, my attempt to center it and mak ...

htmlcss

The value that was verified disappears after the postback

I found a helpful tutorial on creating image checkboxes and decided to implement it. Check out the tutorial here Initially, everything seemed to be working well. However, upon page post back, the checked element was lost and I couldn't retrieve it. ...

c#asp.netcheckboxwebformsbootstrap-4

Unclear about the concept of mobile responsive websites or similar

I recently came across a tool on http://skweezer.com/ that allows you to see how a website will appear on mobile browsers. I decided to test it out with the url http://sachindra149.wordpress.com/ and was shocked by the results. 1) Can someone explain why ...

htmlcss

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

I have come across various solutions to this problem, but none of them seem to be effective for my specific project. In my application, the user's previous choices are displayed in multiple divs. Initially, all the divs are empty. As the user progress ...

javascriptjquerycssruby-on-rails

The changes I make to my CSS file are not reflected on my website

Here's my issue: I had an HTML file and an external CSS file, both successfully linked. Changes I made in the CSS file were reflected on the website until suddenly they weren't. I tried commenting out code, refreshing the page, restarting the se ...

htmlcssgoogle-chromebrowser

Is there a setting causing Webpack to not rebuild when there are changes to the CSS?

I have configured postcss-loader and style-loader on webpack, and I am using webpack-dev-server. However, every time I make changes to the CSS, webpack does not rebuild automatically. The script for webpack dev server that I use in npm scripts: webpack-d ...

cssnode.jswebpackwebpack-dev-server

Is the content within the div longer than the actual div itself when the width is set to 100%?

When working with a div of fixed width that contains only an input text box, and the width of the input is set to 100%, you may notice that it extends slightly beyond the boundaries of the div. For demonstration purposes, consider the following code: HTM ...

htmlcssfirefox

Creating an inverted curve or border-radius for a div element is a design technique that can add

I've been tackling a project that requires me to style the border of a div in an inverted manner. To achieve this, I'm limited to using only CSS and JS without any plugins. I've searched through various online resources and similar questions ...

javascriptjqueryhtmlcss

Introducing semicolons into CSS code can cause disruption

I am currently a beginner in PHP/CSS and feeling a bit lost: So, I came up with this CSS code to structure my website into sections. Everything works fine when I omit the semicolons like so: #main { float:left min-height:500px min-width:350px ...

htmlcss

What is the best way to extract a CSS rule using PHP?

Below is an example of the stylesheet I am currently using: #thing { display: none; } I am looking to retrieve the value of the 'display' property using PHP instead of Javascript. While I know how to do this with Javascript, I would prefer to u ...

phpjavascriptcss

Divergence in image positioning with CSS on Firefox and Chrome

My struggle lies in achieving image alignment consistency across different web browsers: https://i.sstatic.net/367Dz.jpg I suspect it may be an issue with the borders? Query: Should I resort to using a media query to tackle this issue effectively? Curre ...

cssimagealignmentvertical-alignment

Understanding fluid design concept

Check out this example. I've noticed that when resizing the viewport, the font size within the .main class increases while there is no change in the .aside class. Can someone help shed light on this for me? Thank you in advance! ...

cssliquid-layout

Can someone assist me in figuring out how to solve selecting multiple radio buttons at once

<script type="text/javascript"> let x = "1.html"; let y = "2.html"; function redirectPage(form){ for(let i=0; i<form.length; i++) { if(form.answerq[i].checked && form.answerw[i].checked && f ...

javascripthtmlcssradio-button

What is the best way to loop through an array and apply classes to each element separately?

I'm currently working on a unique jQuery plugin that is designed to create dynamic lists based on any data provided. The first 6 items in the list will always remain constant, regardless of the input data. When I say constant, I mean that although th ...

jquerycss

Splitting a row into four columns that will appear consistent on mobile devices

Is it possible to create a row with 4 columns in Angular 6, but have it display as 2 rows with 2 columns each on mobile devices? <div class="row" id="info" *ngIf="this.details"> <div class="col-md-12 mb-3" id="heading"> <h3>Meeting ...

htmlangularbootstrap-4angular-material

What is the best way to eliminate the space following the image?

Something strange happened, and now there's a big gap following the top image. I was working on making the code responsive and then inserted this image, which messed everything up. Any ideas on what I might be doing wrong? I want the image to be close ...

htmlcss