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

}


Tags:

css, responsive, imagesadd, quot, contain, width, height, auto, img, src, pic, jpg, essential, mode, images, unviewable, maximum, html, min, px, margin,

Latest Articles

  • scp: ambiguous target error and solution
  • VirtualBox How To Add iSCSI Storage using VBoxManage
  • iSCSI on Centos 7 Configuration and Setup Guide for Initiator and Target
  • Python and BeautifulSoup4's BS4's Decompose Method To Remove Unwanted Inner Tags
  • httpd AH00534: httpd: Configuration error: No MPM loaded. solution
  • bash script to remove modules from httpd.conf that are not actually installed
  • bash scripting how to create a function
  • Centos 7 PHP MySQL Not Working Solution
  • Bash How To Cut or Split Natively And Get The LAST Field
  • Bash Script How To Manipulate Text/Strings By Searchig and Replacing Natively
  • How Does Cisco CUCM (Cisco Unified Communication Manager) Work?
  • What DNS Options Does Active Directory Offer in Windows Server 2008,2012,2016 ?
  • syntax error, unexpected T_SL in PHP Solution
  • grep regular expression match number range between specific numbers
  • bash how to print out lines of text within a range from the first occurrence
  • bash script how to to check LAN computers for open ports
  • MySQL Using mytop Debug Source of High IO and Slow Performance
  • How To Mathematically Convert and Calculate Binary Value To Decimal Value
  • systemd management using systemctl and journalctl to check systemd logs
  • css how to format code in the code tag