Tips for resizing images to fit different screen sizes on your website

I have a website with an image that is currently responsive thanks to bootstrap. The width adjusts properly on different devices, but I want the image to crop to the left and right when it's enlarged in this specific case.

I've tried various techniques, but nothing seems to be working for me. Could it be because of the bootstrap responsive function? Am I doing something wrong?

I would greatly appreciate some assistance. Here is the code I am currently using:

   <section>
   <div class="container">
      <div class="row">
            <div class="col-lg-12 woodbar">
          <img src="img/WoodenBar2.png" class="img-responsive" alt="Responsive image">
         </div>
           </div>
     </div>
    </section>

For now, my CSS is clean since bootstrap has img-responsive built-in.

If anyone can offer some help, it would be greatly appreciated.

htmlcssresponsive

Answer №1

Consider using the translate feature on the image to adjust its cropping.

* {
  margin : 0px;
  padding: 0px;
}
#imgContainer {
  overflow    : hidden;
  width       : 100vh;/*this will have to be adjusted manually*/
  height      : 100vh;/*this will have to be adjusted manually*/
  margin-left : calc(50vw - 50vh);/*this will have to be adjusted manually*/
}
img#toCrop {
  margin-top  : -20vh;/*this will have to be adjusted manually*/
  margin-left : -30vh;/*this will have to be adjusted manually*/
  width       : 140vh;/*this will have to be adjusted manually*/
  height      : 140vh;/*this will have to be adjusted manually*/
}
@media only screen and (max-aspect-ratio: 1/1) {/*this will have to be adjusted manually*/
  #imgContainer {
    width       : 100vw;
    height      : 100vw;
    margin-top  : calc(50vh - 50vw);
    margin-left : 0px;
  }
  img#toCrop {
    margin-top  : -20vw;
    margin-left : -30vw;
    width       : 140vw;
    height      : 140vw;
  }
}
<div id='imgContainer'>
  <img id='toCrop' src='https://dummyimage.com/600x600/000/fff'>
</div>
<!--Best displayed within an iframe-->

Note that manual adjustments will be required for most of the values.

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

What causes my `` to function intermittently?

I've been experimenting with adding attributes and styling to elements. Sometimes my code works perfectly fine, while other times it doesn't produce the desired output. Here's an example of when it works: $('.card-text') .text( ...

javascriptjqueryhtmlcsstwitter-bootstrap

Restrict the display of items in a unordered list element

Below is my code snippet that limits the number of visible list items in a ul: $wnd.$(el) .find('li:gt(9)') .hide() .end() .append( $wnd.$('<li>+More</li>').click( function(){ $wnd.$(this).nextAl ...

javascriptjqueryhtml

Changing the Color of Hamburger Menu Lines in Bootstrap

How can I change the color of the hamburger menu icon's lines for medium and smaller screen sizes? I have attempted changing it through style attributes and using !important in my CSS file, but so far nothing has been successful. ...

cssbootstrap-5hamburger-menu

The functionality for dragging elements is not functioning properly in JavaScript

Here is the code I used in an attempt to make a div element draggable: let div = document.querySelector('div') div.onmousedown = function() { div.addEventListener('mousemove', move, true) } window.onmouseup = function() { window. ...

javascripthtmlcss

Watching for changes to an object's value in an AngularJS service triggered by a controller from a separate module (Extended Edition)

Referring to this discussion on Stack Overflow: AngularJS trigger and watch object value change in service from controller The original question was about watching for changes in a service from a controller. I am interested in extending this concept to ...

javascripthtmlangularjs

Creating JavaScript Objects from HTML Form data with the help of serializeJSON

Struggling extracting HTML form data into the required JSON format for server communication. Despite following a guide, I can't get the output right. Managed to extract question keys and values, but labeling is tricky. Current Output: {"Question1":" ...

javascriptjqueryhtmljson

A new module is unable to load Angular Material

Recently, I developed an Angular material module similar to a core module. import { NgModule} from '@angular import {MatCheckboxModule} from '@angular/material/checkbox'; @NgModule({ imports: [ MatCheckboxModule ], exports: [ ...

javascripthtmlangularangular-material

What is the best way to display a JavaScript loop on a webpage instead of just in the console?

As a beginner in programming, I have taken on the challenge of creating my own FizzBuzz program. The goal is to write a program that displays numbers from 1 to 100. However, for multiples of three, it should output "Fizz" instead of the number; for multipl ...

javascriptjqueryhtml

The list-image is nowhere to be found

Seeking assistance with my LI style CSS. Visit this link for reference I'm having trouble getting an image to float on the right side of my sidebar links, and my content is overlapping with the sidebar... .sidebar-menu ul { font : 14px font-fam ...

htmlcssxhtml

What is the process for integrating CSS-styled text into CKEditor?

Currently, I am developing plugins that are designed to incorporate various elements like images and tables into the editor. My objective is to be able to view these elements in their final visual form within the editor itself. To achieve this, I plan on a ...

cssckeditor

Implementing translation text into a PHP database

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Translate and Save Text</title> </head> <body> <form action="" method="post" name="theform"> <table width="693" border="1" style="table-l ...

javascriptphphtmlmysqlgoogle-translate

Fixed Element Transitioning from Starting Position on Scroll

Check out the JSFiddle example here I'm currently working on a website utilizing Bootstrap 3. I have an image that sticks to the page when scrolling by changing its position to fixed. While this functionality works, the image tends to shift slightly ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to update the input box value with a variable using jquery?

I am currently facing an issue with changing the value attribute of an input box in a form using jquery. Although I am able to change the value, it does not reflect in the outer html. Below is my current code snippet: $("a").click(function(event) { va ...

javascriptjqueryhtmlforms

Updating the DOM through Long Polling allows us to maintain existing attributes in jQuery Plugin

UPDATE: The functionality is all set; the pushes are working. The only issue I'm facing is that each push resets the #load_info div to empty. Is there a way to retain the original content inside the div, even though the content will be an updated vers ...

javascriptphpjqueryhtmljson

Troubleshooting Angular MIME problems with Microsoft Edge

I'm encountering a problem with Angular where after running ng serve and deploying on localhost, the page loads without any issues. However, when I use ng build and deploy remotely, I encounter a MIME error. Failed to load module script: Expected a ...

javascripthtmlangulartypescriptwebstorm

Active Tab Indicator - Make Your Current Tab Stand Out

I currently have a set of 3 tabs, with the first tab initially highlighted. I attempted to use some JQuery code in order to highlight a selected or active tab, but for some reason it is not working as expected. Any assistance would be greatly appreciated. ...

jqueryhtmlcss

Graphic background integrated into form input

Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text? Are there alternative methods we could use for this functionality? ...

htmlcsssvg

No code is appearing on the page, just a blank space

Whenever I visit this page on the web, the screen shows up as empty and I've encountered similar issues with other JavaScript pages that I've created. This makes me wonder if there might be a missing piece of code or something else causing the pr ...

javascripthtmlbuttoncharts

Creating a fieldset and form in HTML code involves using

I encountered a strange issue recently. I had set up a form in HTML to send data to my PHP script, and everything was functioning correctly. However, the design looked a bit messy without margins, so I decided to make some CSS adjustments. After applying s ...

phphtmlfieldset

Configuration for secondary dependencies in Tailwind

As per the guidelines outlined in the official documentation, it is recommended to configure Tailwind to scan reusable components for class names when using them across multiple projects: If you’ve created your own set of components styled with Tailwin ...

javascriptcssnode.jstailwind-css