How to ensure product images keep their size and aspect ratio in Weebly

Currently, I am running into issues while using Weebly to create an eCommerce website. The problem lies with the product element images - they seem to be appearing twice the size of the original upload. Unfortunately, I do not have access to any other images as my client provided these specific ones for me.

Despite my efforts, I cannot seem to get the images to maintain their "Natural" size. I attempted to modify what I believe is the relevant CSS and added the following:

div.wsite-com-product-images-main-image,.wsite-com-product-images-main image{width: 100% !important;Height: 100% !important;}

as well as

.mousetrap{display:none;}

Unfortunately, neither of these solutions seem to be effective. It is possible that a .js query is running a calculation to resize the images, but I have been unable to locate the appropriate code.

If you could provide assistance, it would be greatly appreciated.

Website:

Example Page:

javascripthtmlcssweebly

Answer №1

Are you looking for something similar to this?

.small img {
  width: 200px;
  height: 400px;
  object-fit: contain;
}

.img-small {
  width: 200px;
  height: auto;
}
<div class="small">
  <img src="https://www.example.com/image.jpg" />
</div>

<img src="https://www.example.com/image.jpg" class="img-small" />

By setting a width and keeping the height property as auto, the image will be scaled properly. You may also find information about the object-fit property useful :)

For a live demonstration, check out this example. Enjoy! :)

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 a way to ensure uniform display of HTML form error messages across various browsers?

Recently, I completed a login form that consists of username and password fields. For the username, I used a text field with the type email, while for the password, I utilized a text field with the type password which requires validation through a regex pa ...

javascripthtmlangularjsvalidationconstraint-validation-api

subscriptions to behavior subjects may not function properly across all components

When setting up my global service, I instantiate a BehaviorSubject variable dataWorkflowService: export class CallWorkflowService { url = 'http://localhost:3000/'; selectedNode : BehaviorSubject<Node> = new BehaviorSubject(new Node(&a ...

javascriptangularrxjssubscriptionbehaviorsubject

String mistakenly interpreted as integer by Django template engine

Here is a sample list: [(2,'09-07-2014')] On the client side, you can access this list using: {% for item in list %} console.log( {{ item.0 }} + ' and ' + {{ item.1 }} ) {% endfor %} The issue arises when item.1 returns -2012, as it ...

javascriptpythondjangodjango-templates

How can I utilize a custom shader in Three.js to fill a png texture and establish transparency?

I am facing an issue with changing the color of a texture that predominantly contains red. Despite my efforts, the texture is completely filling the picture with red. Can someone please help me identify the error? I am also struggling to understand why I ...

javascriptthree.jsglsl

Automatically adjust focus to a specific browser tab

Having trouble setting the auto focus on a tab when the page loads. I've created a fiddle where I attempted to set focus on the tab with class="test". Any ideas on what I might be doing wrong? http://jsfiddle.net/qL2W4/2391/ <div id="mydiv"> ...

javascriptjquery

The IBM Bluemix platform running Node.js and websockets appears to frequently terminate connections on the client side

Despite my server code not initiating any closures, the websocket connections of my node clients within IBM Bluemix keep getting closed. This is how my server-side code looks: app.ws('/problemUpdate', function(ws, req) { // removing oldest ...

javascriptnode.jswebsocketibm-cloud

Comparing iPad and Desktop Devices

Working on the responsive site sandbox.mercomcorp.com, I encountered an issue where the CSS meant for an iPad device is affecting the desktop CSS. Shouldn't the iPad have its own separate media query from the desktop? Here's a snippet of the CSS: ...

ioscssipadresponsive-design

Obtain the background color of an element using the source attribute in Selenium WebDriver

Understanding the x-path is crucial, such as < img id="" src="/A/A/B.png" style=""> My task involves identifying the color of the image, but unfortunately, the style attribute does not provide any information about color. It only includes details a ...

htmlcssselenium

Struggling to make HTML5 geolocation coordinates function properly

I've attempted to work with examples in this code snippet, but I'm struggling to make the html5 geolocation coordinates function properly. Everything works fine when I hardcode the coordinates. var infowindow; var map; function initialize() ...

javascripthtmlgeolocation

How can one extract the text from a title tag nested within a text tag using Selenium WebDriver?

How can I extract the text "Open" from a title tag inside of a text tag using Selenium Webdriver and print it? The HTML code is as follows: enter image description here After trying different xpaths, I get 2 results: //div[@class='visual visual-card ...

javahtmlseleniumselenium-webdriverxpath

Using finally() to correctly construct a Javascript promise

Currently, I am working on an Express API that utilizes the mssql package. If I neglect to execute sql.close(), an error is triggered displaying: Error: Global connection already exists. Call sql.close() first. I aim to keep the endpoints simple and e ...

javascriptexpresspromise

Display a unique background image based on the provided ID using JavaScript

I came across this interesting code snippet but I'm struggling to understand how to replace DIV with ID="something" in the JavaScript portion. http://jsfiddle.net/EyKZZ/ ...

javascriptjqueryrandombackground-image

This method or property is not supported by the object - How to call an Applet in Internet Explorer 9

cmd > java -version Java Version : "1.7.0_11" (Updated) Java(TM) SE Runtime Environment (build 1.7.0_11-b21) Java HotSpot(TM) Client VM (build 23.6-b04, mixed mode, sharing) browsers = IE7,IE8,IE9 (The functionality works smoothly in Google Chrome and ...

javajavascripthtmlinternet-explorerapplet

Refresh a JavaScript or division without having to reload the entire page

Is there a way to refresh a JavaScript in a specific div when a button is clicked without refreshing the entire page? It would be ideal if only the div containing the JavaScript could be reloaded. I've experimented with various solutions such as: as ...

javascriptjqueryhtmlajaxreload

Replicate the process of transferring table rows to the clipboard, but exclusively copying the contents

Currently, I am attempting to copy a paginated table to my clipboard by referring to this guide: Select a complete table with Javascript (to be copied to clipboard). However, the issue lies in the fact that it only copies the data from the first page. In ...

javascriptjqueryangularhtml-tableclipboard

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

javascripthtmljquerycss

Error: The function pajinate is not defined for jQuery([...])

I'm currently experiencing difficulties with the jQuery Pajinate plugin after migrating to a new host. The script was functioning properly on my previous hosting platform, but now I seem to be encountering some problems. Below is the code snippet: ...

javascriptjquery

How can I pass a URL into the <img> tag using WebAPI to load an image encoded in base64 format?

Is there a way to insert a URL from Webapi into an <img> tag? My approach involves converting the image to a base64 string and storing it in the Database as a varbinary. <img src="https://localhost:44381/api/Account/get-resource-image;data:imag ...

c#htmlangularjsasp.net-web-apibase64

The enigma of CSS: How is the width mysteriously set to 0px with no visible CSS styling

Take a look at this snapshot of a webpage I'm currently designing in Chrome Developer Tools: https://i.sstatic.net/SB00j.png The primary rule in the 'Matched CSS Rules' section indicates that the width of the element should be 160px. Howe ...

css

iPhone 3GS and 4 not expanding DIVs by 100%

I've been encountering a significant issue with a div that's set to 100%. It displays properly on desktop screens, but on iPhones, there appears to be a gap on the right side. I've attempted to use the following CSS: body { min-width:980p ...

jqueryhtmlioscsswidth