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

  • CentOS 6 impossible to compile a newer libguestfs
  • chroot
  • How To Get Started on Ubuntu with gpt-2 OpenAI Text Prediction
  • Remove cloud-init in your VM
  • QEMU-KVM KVM Command Line Practical Guide
  • Linux How To Change NIC Name to eth0 instead of enps33 or enp0s25
  • virt-resize: error: libguestfs error: could not create appliance through libvirt.
  • Asterisk Does Not Retry When Authentication Fails
  • Linux Debian Ubuntu How To Install PEPPER Faster and Latest Adobe Flash Player in Firefox
  • How To Speed Up Linux Ubuntu and Debian Based Computers By Improving CPU Performance and Changing the CPU Governor
  • Convert data or file to base64 on a single line
  • Linux Mint Ubuntu Debian radeon slow 2D performance issues radeon_dp_aux_transfer_native: 158 callbacks suppressed
  • mdadm: super0.90 cannot open /dev/sdb1: Device or resource busy mdadm: /dev/sdb1 is not suitable for this array.
  • How To Install NextCloud on Centos 7 and Centos 8
  • AH01630: client denied by server configuration:
  • ERROR: Could not find a version that satisfies the requirement PIL (from versions: none) ERROR: No matching distribution found for PIL
  • ZTE Camera Cannot Work unable to connect to camera. Camera has been disabled becaue of security policies or is being used by other apps
  • QEMU KVM how to boot off a physical CD/DVD/BDROM Drive
  • How To Install OpenProject on Centos 7 Step-by-Step Guide
  • Ubuntu Debian Linux Cannot Install Wine Solution - wine1.6 : Depends: wine1.6-i386 (= 1:1.6.2-0ubuntu14.2) but it is not installable wine1.4 : Depends: wine1.6 but it is not going to be installed