Jump to content
Sign in to follow this  
Jake Siemens

Product Image Site Wide Resize

Recommended Posts

The fast and dirty solution is to edit the inline CSS and make width 400px instead of 250px. Then you need to make sure that all your images are square with a minimum width of 400px.


One advice - always avoid inline CSS.


The best solution is to make an image as a background of DIV element with width and height 400px. Here is described how: https://css-tricks.com/almanac/properties/o/object-fit/ This way the actual size of the image does not matter. They will all fit the parent container.


Let me know if you need more help.



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By Mario89
      I created my first website. Please tell me, what can I change and improve?
    • By rookie
      I’m very curious about this topic cause the definition of web designer is different from country to country, for example some countries define a web designer as a person who knows design and programing (Javascript and php etc).
      I wanna know where you are from and which language you need to be web designer like the following.
      Country   :  Japan
      Language:   HTML,CSS,*JavaScript, *wordpress 
      *As to JavaScript, you don’t have to know everything about it but at least how it works. 
        Plus you basically just need to know how to customize jQuery.
       I really wanna know to what extent I should learn JS or php if I need to learn them as web designer in some countries.
      Thanks in advance for your help ! 
    • By Seth
      Trying to get the outside border to go around all the copy including the bullets. What am I missing here?
      <html> <head> <title>fancy box 2 column bullet list</title> </head> <body> <div style="border: 1px solid #41b6e6; padding:0px;">     <div style="background: #41b6e6; color:#fff; font-weight:bolder;">SMI Network Security Services</div>     <div>Some of the key services we provide to help you address your security needs include</div>     <div style="width:50%; float:left;">         <ul>             <li>Vunerability Management</li>             <li>Web Application Security/Firewall</li>             <li>DDoS Monitoring & Mitigation</li>             <li>Real-time Log Flow Analaysis</li>         </ul>     </div>     <div style="width:50%; float:left;">         <ul>             <li>Event Log Management</li>             <li>Managed Cloud Security</li>             <li>Network-Based Security & Protection</li>         </ul>     </div> </div> </body> </html>  
    • By colinbrazier
      Hi everyone,
      My dropdown multi-level menu at www.fobgfc.org doesn't work with touch devices.  It doesn't drop down at all.  Basically because it makes use of :hover.
      I'd like the functionality to behave like the menu on www.chipsteadfc.org.uk
      I will consider using jQuery.  
      How's best to do this please?
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts