css responsive images

add this style="background-size: contain;max-width: 100%; height: auto;" to your img code.
Example: <img style='background-size: contain;max-width: 100%; height: auto;' src="/some/pic.jpg">

This code is really essential because in responsive mode on a phone it will cause images to be cut off and unviewable past the width of the device.

Another nice trick is to add this as css to the img tag based on maximum screen width (this way no html code has to be changed):

 

@media only screen and (min-width: 300px) and (max-width:1024px) {
       img {
        background-size: contain;max-width: 100%; height: auto
           }
}

 

If you want to center the image use this:

margin-left:auto;margin-right:auto

       img {
        background-size: contain;max-width: 100%; height: auto;
margin-left:auto;margin-right:auto

           }

Latest Articles

  • Centos 7 - Convert Minimal to Graphical GUI GNOME or KDE Desktop
  • AMD Set Fan Speed and Other Powerplay Memory/CPU Timings with a Linux script
  • Ethereum Mining Claymore Nanopool Error
  • genisoimage errors with long filenames and deep directory structures
  • Linux Kernel USB Export Errors
  • How to download gajim 0.16.9 XMPP/Jabber client so you can use OMEMO encryption
  • HP DL385 G7 Linux BIOS Update Flash
  • hwloc-nox set CPU affinity in Linux
  • Firefox An error occurred during a connection to some-ip-or-domain. SSL peer reports incorrect Message Authentication Code. Error code: SSL_ERROR_BAD_MAC_ALERT Solution
  • Proxmox understanding the directory structure and why an NFS datastore appears to be missing files/isos
  • pandoc convert markdown to html
  • Proxmox error uploading an iso solution
  • Cannot install moodle
  • MySQL change for Antelope format to Barracuda error solution
  • vmkping -I vmk1 10.0.2.69 PING 10.0.2.69 (10.0.2.69): 56 data bytes sendto() failed (Host is down)
  • gvfs mount in /run/user cannot be accessed or displayed wrong permissions
  • VMWare vSphere 6.7 Errors Solution 503 Service Unavailable (Failed to connect to endpoint:
  • How To Enable Nested KVM so guests can virtualize with hardware extensions
  • vi error solution E166: Can't open linked file for writing
  • Supermicro IPMI / KVM / BMC Remote Console Screen Resizing Issue - Window Cut Off Solution