Ensure that a substantial picture can adapt to different screen sizes without losing any important details

I'm currently working with a client who has a bunch of images on their website that are causing responsiveness issues.

https://i.sstatic.net/UuSbG.jpg

There are about 8 different images, each with varying sizes.

Is there a way to make these testimonials collapse into a single column without having to edit each one individually?

I'm not sure if it's possible, but thought I'd ask just in case there's a new technology out there that I haven't heard of..

Thanks in advance :)

Answer №1

Uncertain if responding to this is the best course of action.

Here is an example from my previous comment:

  • media queries involved
  • background-size property utilized
  • background-position defined
  • multiple backgrounds used (same image placed twice at different locations)

Check out the code here for more details!

.fake {
  border:solid blue;
  width:80%;
  margin:1em auto;
  padding-top:121.4%;
  background:
    url(https://i.sstatic.net/UuSbG.jpg) top left no-repeat,
    url(https://i.sstatic.net/UuSbG.jpg) bottom right no-repeat;
  background-size: 100% auto;
}
@media (max-width: 800px) {
  .fake {
     background-size: 200% auto;
     padding-top:442.8%;
  }
}
<div class="fake"></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

Should CSS properties be applied directly to the html tag?

Surprisingly, I recently discovered that it's possible to set the background-color of the html tag. It seems strange since I always thought the body was responsible for containing the first rendered tag. I used to believe that the html tag was just a ...

Attempting to incorporate a new CSS sub menu alongside the current one

Having trouble with menu styling, I'm new to this and trying to add a sub menu to an existing drop down menu. Check out my JSFiddle This is the CSS code: .menu_main { float: left; width: 60%; } #access .menu { list-style: none; font-weight: normal ...

Using a UUID as the default ID in a Postgres database system is a straightforward process

As I transition to postgres from mongodb due to the recent announcement, I've noticed that the IDs are simply numerical and auto-incremented. I've attempted a few solutions: Setting the default ID to a UUID with a lifecycle hook - Unfortunately, ...

Implementing the Model-View-Controller Architecture in Node.js

When starting an MVC pattern, is it best to build the Model first or the View first in CodeIgniter? I have read conflicting information on this topic. So, when building an MVC app using the Express.js framework: Should I start by building the Model or the ...

Comparing synchronous and asynchronous streams in RxJS

I have a basic question regarding the distinction between synchronous and asynchronous operators and sequences. In programming, everything can be represented as a sequence. For example: An array of numbers can be considered a sequence that is traditiona ...

jquery technique for toggling a single button

My goal is to use jQuery to toggle a button rather than the typical paragraph toggling. I want the button to appear and disappear when clicked, while also increasing the "score" upon each click and decreasing it when the button reappears. Can anyone guide ...

Are there any alternative methods to elegantly organize a form within a table other than the one showcased here? My form consists of varying numbers of

Within the initial row, I have incorporated four columns, while rows 2-4 contain two columns each to enhance the formatting. I am seeking a more elegant approach to address this issue and avoid triggering the validation warning. This task pertains to a s ...

Angular Universal 9 disrupts the functionality of Bootstrap CSS directives

My application runs perfectly fine with npm run start. However, when I try npm run build:ssr and npm run serve:ssr, it doesn't function properly without throwing any errors. While running npm run start, there's a button with 65% opacity. The des ...

After performing a Vuex action on one Vue.js component, the update is not reflected on another Vue

I am facing an issue with a component that renders a booking table. When I update my store in another component, the table does not get updated even though the store and computed properties are updated. I suspect that the problem lies with the filter not b ...

Prevent the ability to select multiple options in one multiselect box depending on the choices made in a separate mult

I am working with two multi select boxes, one for a country list and one for a state list <select multiple="multiple" name="country[]" id="country" > <option value="0">Select a Country</option> <?php foreach($country_li ...

How can I securely save a user's login information using ExtJS without saving it multiple times?

Currently, I am utilizing Ext.Ajax.request() to access a PHP page that provides user-specific information during the login process. In order to store variables such as cookies and session information in ExtJS, I have created a model with necessary fields a ...

Ember - Initiate a GET request to access a list of trees from an API endpoint

I have a project that utilizes Ember and Ember-Data with a requirement for a lazy-loaded tree-list. Within the API, there is an endpoint called /roots which contains children such as /roots/categories and /roots/components. These children are not fully lo ...

Having trouble inserting an item into the localStorage array

In my localStorage, I store a list of movies that users have purchased tickets for using an array. However, I am encountering an issue where I cannot add new values to this array in the localStorage. Here is the code snippet: if(window.localStorage){ ...

Merge two arrays together in Javascript by comparing and pairing corresponding elements

Dealing with two arrays here. One comes from an API and the other is fetched from Firebase. Both contain a common key, which is the TLD as illustrated below. API Array [ { "TLD" : "com", "tld_type": 1, }, "TLD" : "org", "tld_type" : 1, } ] Fi ...

Issue persists with Angular 2 *ngFor functionality even after successfully importing CommonModule

After creating a feature module using the CLI, I imported the common module as shown below: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HomeComponent } from './home/home.compo ...

Guide to showcasing associated information in HTML using Angular 7

I am a beginner with Angular 7 and I am attempting to showcase a product's color on the HTML side using Angular 7 but have not been successful. Below are my tables; Product Id Name Color Id Name ProductColorRelation Id ProductId ColorId In ...

Refresh meta tags in a Next.js/React app

In the process of optimizing a website for SEO, I am facing the challenge of updating the meta description's content dynamically without using any third-party libraries. While I have successfully implemented the functionality, it currently requires a ...

Discord.js encountered an error: Invalid Form Body embed.fields[0].value: Please make sure to fill in this required field

My attempts to create an order command for my discord.js bot have been unsuccessful. Whenever someone uses the command, it doesn't respond and instead presents the following error in the console: "This error originated either by throwing inside of an ...

Having trouble loading my app.js in Angular - Seeking help on Coursera!

I've followed the instructions provided thus far and inserted the HTML code accordingly. However, upon attempting to load the page, all I see is: The tabs: The Menu Appetizers Mains Desserts The description: image: dish.name , dish.name , dish.labe ...

What might be causing the overflow of my page width by my navbar?

I am currently working on creating a product landing page for freecodecamp, and I'm facing some issues with my navbar - the first element I need to get right. Could you help me identify what's wrong with my code? Additionally, I would like to ad ...