Just don&#39;t set the `width` of the image, only the `max-width`.

    img {max-width:100%; height:auto}

(`height:auto` is not really necessary, since `auto` is the default, but I put it in there as a reminder to myself that I want the image to have its natural proportions.)

This snippet has two boxes, one that is smaller than the image and one that is larger. As you can see, the image in the smaller box gets scaled down, while the one in the bigger box has its normal size.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {border:2px outset green; margin:6px 0}
    .box1 {width:100px; height:70px;}
    .box2 {width:200px; height:100px;}
    img {max-width:100%; height:auto}


&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;box1&quot;&gt;
        &lt;img src=&quot;https://i.stack.imgur.com/FuQYf.png&quot; alt=&quot;&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;box2&quot;&gt;
        &lt;img src=&quot;https://i.stack.imgur.com/FuQYf.png&quot; alt=&quot;&quot; /&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



You can set the max width of the image in a style tag on the image itself. 
Then in the style sheet set the display type to &quot;block&quot;, the width to whatever percentage of the container you want, and the height to auto. Then add margin: 0px auto to that and it should center perfectly and will never be larger that it&#39;s original size.  

If these are user-uploaded images and you are using PHP for example, find the image width by using getImageSize() and add the style tag programmatically to the image. 

I&#39;ve found several posts about best practice, reproducibility and workflow in R, for example:

- [How to increase longer term reproducibility of research (particularly using R and Sweave)][1]
- [Complete substantive examples of reproducible research using R][2]

One of the major preoccupations is ensuring portability of code, in the sense that moving it to a new machine (possibly running a different OS) is relatively straightforward and gives the same results.

Coming from a Python background, I&#39;m used to the concept of a virtual environment.  When coupled with a simple list of required packages, this goes some way to ensuring that the installed packages and libraries are available on any machine without too much fuss.  Sure, it&#39;s no guarantee - different OSes have their own foibles and peculiarities - but it gets you 95% of the way there.

Does such a thing exist within R?  Even if it&#39;s not as sophisticated.  For example simply maintaining a plain text list of required packages and a script that will install any that are missing?

I&#39;m about to start using R in earnest for the first time, probably in conjunction with Sweave, and would ideally like to start in the best way possible!  Thanks for your thoughts.

  [1]: https://stats.stackexchange.com/questions/4466/how-to-increase-longer-term-reproducibility-of-research-particularly-using-r-an
  [2]: https://stats.stackexchange.com/questions/1980/complete-substantive-examples-of-reproducible-research-using-r

Virtual environment in R?

As Apple introduced [Swift][1], their new programming language, I wonder how you can integrate it with existing Objective-C libraries that are available via [CocoaPods][2]?

  [1]: https://developer.apple.com/library/prerelease/ios/documentation/swift/conceptual/swift_programming_language/index.html
  [2]: http://cocoapods.org/

How to integrate Cocoapods with a Swift project?

Can you do this? I&#39;m having users upload images into a container that is width:100%, but I don&#39;t want the images to be larger than their original size. Many thanks!

CSS image max-width set to original image size?

<p>Can you do this? I'm having users upload images into a container that is width:100%, but I don't want the images to be larger than their original size. Many thanks!</p>


How do you organize your js &amp; css folder in your web application?

My current project structure is like this one:

    root/
    ├── assets/
    │   ├── js/
    │   │   └──lib/
    │   ├── css/
    │   └── img/
    └── index.html

But it&#39;s more complicated when I use many javascript library &amp; css plugin. Javascript plugin comes with its own .js file and sometimes with  its own .css file.

For example, when I use JQuery with JQueryUI plugin, I put the jquery.js and jquery-ui.js inside js/lib directory. But JQueryUI comes with its own css file. 
Where should I put the css from javascript plugin for best practice? Should I put them inside lib folder, to distinguish my css and javascript css plugin? Or somewhere else?

I know it&#39;s a personal preferences, but I just wanna know how you guys organize your project folder. 

Thanks in advance :)

Best Practice to Organize Javascript Library &amp; CSS Folder Structure

I have a web application which uses Bootstrap (2.3.2 - corporate policy, we cannot upgrade to 3.0 without lots of testing across several web applications). We have several long pages within this application that require validation of forms and tables - however due to practical and aesthetic reasons we need to have an alert message appear as a floating div at the top of the page.

This will be a fixed floating div, that can be shown and hidden using javascript as and when needed. This part works and I can control this div, whenever I need to flash some information to the user or some error takes place.

The layout is like so:

    &lt;div id=&quot;message&quot;&gt;
        &lt;div id=&quot;inner-message&quot; class=&quot;alert alert-error&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot;&gt;&amp;times;&lt;/button&gt;
            test error message
        &lt;/div&gt;
    &lt;/div&gt;

The styling is below:

    #message {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    #inner-message {
        margin: 0 auto;
    }


The #message div behaves all well and good, but when I try and add some padding to the #message div (to try and get some space between the edge of the page and the div i.e. padding: 5px), the div only gets padding on the left and top and the rest of the div is pushed out too far to the right of the page (hiding part of the &#39;x&#39; inside the bootstrap alert).

Has anyone experienced this before? It seems like a simple enough issue, so am I overlooking something?

Bootstrap alert in a fixed floating div at the top of page

This seems like a trivial problem, but I can&#39;t figure it out.

On Bootstraps own website they have the Select example. 

![bootstrap select][1]



&lt;br &gt;&lt;br &gt;
Looking at the code it looks like there&#39;s a border-radius of 4 on that select element. 
![enter image description here][2]

&lt;br&gt;&lt;br&gt;
My hope would be that changing that border-radius to 0 would then remove the border-radius from the select element, however, that&#39;s not the case - as seen in the picture below.

![enter image description here][3]


&lt;br&gt;&lt;br&gt;
I&#39;ve explored all the CSS that is changing that select element but none of it seems to remove the border radius.

  [1]: http://i.stack.imgur.com/la7Tg.png
  [2]: http://i.stack.imgur.com/le9qQ.png
  [3]: http://i.stack.imgur.com/8dVrY.png

Remove border radius from Select tag in bootstrap 3

I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down...

Is there any way to fix that?

Avoid having to double-click to toggle Bootstrap dropdown

I have a colored png image with transparency. I would like to use css filter to make the whole image white but leave the transparency as it is.
Is that possible in CSS?

CSS filter: make color image with transparency white

I have an image at this link: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

As you can see, this is a normal image with correct orientation. However, when I set this link to src attribute of my image tag, the image becomes upside down. http://jsfiddle.net/7j5xJ/

&lt;!-- begin snippet: html --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;img src=&quot;http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg&quot; width=&quot;200&quot;/&gt;

&lt;!-- end snippet --&gt;

Do you have any idea what is going on?


img tag displays wrong orientation

My goal is to display 4 images per row. Code below:

    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-md-3 col-sm-4 col-xs-6&quot;&gt;
            &lt;a href=&quot;{site_url}scents/baobab/pearls/black-pearls&quot;&gt;&lt;img src=&quot;{site_url}images/products/4906_1.jpg&quot;&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-3 col-sm-4 col-xs-6&quot;&gt;
            &lt;a href=&quot;{site_url}scents/baobab/pearls/black-pearls&quot;&gt;&lt;img src=&quot;{site_url}images/products/4906_1.jpg&quot;&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-3 col-sm-4 col-xs-6&quot;&gt;
            &lt;a href=&quot;{site_url}scents/baobab/pearls/black-pearls&quot;&gt;&lt;img src=&quot;{site_url}images/products/4906_1.jpg&quot;&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-3 col-sm-4 col-xs-6&quot;&gt;
            &lt;a href=&quot;{site_url}scents/baobab/pearls/black-pearls&quot;&gt;&lt;img src=&quot;{site_url}images/products/4906_1.jpg&quot;&gt;&lt;/a&gt;
        &lt;/div&gt;                                                                                    
    &lt;/div&gt;

And I expect too see images resized based on column style from Bootstrap, but what I&#39;m getting are overlapping full images .

Any clue what is going on?


Images not resized based on Bootstrap column size

I have 10,000 photos that need to be resized so I have a Java program to do that. Unfortunately, the quality of the image is poorly lost and I don&#39;t have access to the uncompressed images.


    import java.awt.Graphics;
    import java.awt.AlphaComposite;
    import java.awt.Graphics2D;
    import java.awt.Image;
    import java.awt.RenderingHints;
    import java.awt.image.BufferedImage;
    import java.io.File;
    import java.io.IOException;
     
    
    import javax.imageio.ImageIO;
    /**
     * This class will resize all the images in a given folder
     * @author 
     *
     */
    public class JavaImageResizer {
     
        public static void main(String[] args) throws IOException {
     
            File folder = new File(&quot;/Users/me/Desktop/images/&quot;);
            File[] listOfFiles = folder.listFiles();
            System.out.println(&quot;Total No of Files:&quot;+listOfFiles.length);
            BufferedImage img = null;
            BufferedImage tempPNG = null;
            BufferedImage tempJPG = null;
            File newFilePNG = null;
            File newFileJPG = null;
            for (int i = 0; i &lt; listOfFiles.length; i++) {
                  if (listOfFiles[i].isFile()) {
                    System.out.println(&quot;File &quot; + listOfFiles[i].getName());
                    img = ImageIO.read(new File(&quot;/Users/me/Desktop/images/&quot;+listOfFiles[i].getName()));
                    tempJPG = resizeImage(img, img.getWidth(), img.getHeight());
                    newFileJPG = new File(&quot;/Users/me/Desktop/images/&quot;+listOfFiles[i].getName()+&quot;_New&quot;);
                    ImageIO.write(tempJPG, &quot;jpg&quot;, newFileJPG);
                  }
            }
            System.out.println(&quot;DONE&quot;);
        }
     
        /**
         * This function resize the image file and returns the BufferedImage object that can be saved to file system.
         */
            public static BufferedImage resizeImage(final Image image, int width, int height) {
    	int targetw = 0;
    	int targeth = 75;
    	
    	if (width &gt; height)targetw = 112;
    	else targetw = 50;
    	
    	do {
    		if (width &gt; targetw) {
    			width /= 2;
    			if (width &lt; targetw) width = targetw;
    		}
    		
    		if (height &gt; targeth) {
    			height /= 2;
    			if (height &lt; targeth) height = targeth;
    		}
    	} while (width != targetw || height != targeth);
    	
        final BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        final Graphics2D graphics2D = bufferedImage.createGraphics();
        graphics2D.setComposite(AlphaComposite.Src);
        graphics2D.setRenderingHint(RenderingHints.KEY_INTERPOLATION,RenderingHints.VALUE_INTERPOLATION_BILINEAR);
        graphics2D.setRenderingHint(RenderingHints.KEY_RENDERING,RenderingHints.VALUE_RENDER_QUALITY);
        graphics2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
        graphics2D.drawImage(image, 0, 0, width, height, null);
        graphics2D.dispose();
    	
        return bufferedImage;
    }

An image I am working with is this:
![Firwork - original - large][1]

This is the manual resizing I&#39;ve done in Microsoft Paint:

![resize - using Paint - small][2]

and this is the output from my program [bilinear]:

![resize - using java program - small][3]

**UPDATE:** No significant difference using `BICUBIC`

and this is the output from my program [bicubic]:

![enter image description here][4]


is there anyway to increase the quality of the program output so I don&#39;t have to manually resize all photos?

Thank you in advance!


  [1]: http://i.stack.imgur.com/X0aPT.jpg
  [2]: http://i.stack.imgur.com/bbPis.jpg
  [3]: http://i.stack.imgur.com/Z7tD3.jpg
  [4]: http://i.stack.imgur.com/oMU52.jpg

Java - resize image without losing quality

**html**

    &lt;img src=&quot;logo.svg&quot; alt=&quot;Logo&quot; class=&quot;logo-img&quot;&gt;


**css**

    .logo-img path {
      fill: #000;
    }


The above svg loads and is natively `fill: #fff` but when I use the above `css` to try change it to black it doesn&#39;t change, this is my first time playing with SVG and I am not sure why it&#39;s not working.

img src SVG changing the styles with CSS

    ffmpeg -r 1/5 -start_number 2 -i img%03d.png -c:v libx264 -r 30 -pix_fmt yuv420p out.mp4
This line worked fine but I want to create a video file from images in another folder.
Image names in my folder are:

    img001.jpg
    img002.jpg
    img003.jpg
    ...

How could I input images files from a different folder? Example: `C:\mypics`

I tried this command but `ffmpeg` generated a video with the first image (img001.jpg) only.

    ffmpeg -r 1/5 -start_number 0 -i C:\myimages\img%03d.png -c:v libx264 -r 30 -pix_fmt yuv420p out.mp4


Content Type	Original Author	Original Content on Stackoverflow
Question	nikk wong	View Question on Stackoverflow
Solution 1 - Css	Mr Lister	View Answer on Stackoverflow
Solution 2 - Css	Nancy Hastings-Trew	View Answer on Stackoverflow

CSS image max-width set to original image size?

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

How to integrate Cocoapods with a Swift project?

Virtual environment in R?

Attributions