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

  • Linux Ubuntu Cannot Print Large Images
  • Cannot Print PDF Solution and Howto Resize
  • Linux Console Login Screen TTY Change Message
  • Apache Cannot Start Listening Already on 0.0.0.0
  • MySQL Bash Query to pipe input directly without using heredoc trick
  • CentOS 6 and 7 / RHEL Persistent DHCP Solution
  • Debian Ubuntu Mint rc-local service startup error solution rc-local.service: Failed at step EXEC spawning /etc/rc.local: Exec format error
  • MySQL Cheatsheet Guide and Tutorial
  • bash script kill whois or other command that is running for too long
  • Linux tftp listens on all interfaces and IPs by DEFAULT Security Risk Hole Solution
  • python import docx error
  • Cisco Unified Communications Manager Express Cheatsheet CUCME CME
  • Linux Ubuntu Debian Missing privilege separation directory: /var/run/sshd
  • bash how to count the number of columns or words in a line
  • bash if statement how to test program output without assigning to variable
  • RTNETLINK answers: Network is unreachable
  • Centos 7 how to save iptables rules like Centos 6
  • nfs tuning maximum amount of connections
  • qemu-kvm error "Could not initialize SDL(No available video device) - exiting"
  • Centos 7 tftpd will not work with selinux enabled