如何保持图像比例使用calc（width - X） [英] How to keep image proportion using calc (width - X)

问题描述

<$ p $

我知道只指定宽度或高度百分比将允许图像保持正确的比例， p> img {width：calc（100％ - 60px）;}


我失去了比例。图像将变得60px更窄。然后我尝试这样：

  img {width：calc（100％ -  60px）; height：calc（100％ -  60px）;} 
  

它的正确比例。

有没有人知道使用CSS或可能一些轻的js，使用计算单位，同时保留正确的比例？

最终目标是使所有图像都在一个大的（包括每个页面上的大部分内容）div分配CSS以减少​​它们的图像大小以适应移动设备（具体地，iphone纵向方向），没有溢出并引起水平滚动，或其他具有100％宽度（以跨越页面，例如横幅）的元素不足整页宽度。

我想使用特定于设备宽度的媒体查询，以便给所有图像添加我的总边缘后的最大px宽度％paddings将工作，但我宁愿使用calc值，如果为没有别的，我很烦，我不能使用它们。

解决方案

如果你只想设置一个维度image，将另一个维度设置为 auto 。浏览器将处理比例。

  img {
 width：calc（100％ -  60px）; 
 height：auto; 
} 
  

I know that specifying only a width or a height in percentages will allow images to maintain their correct proportions, however, it seems if I try something like:

img {width: calc(100% - 60px);}

I lose the proportion. The image will become 60px narrower. I then tried this:

img {width: calc(100% - 60px); height: calc(100% - 60px);}

..but the image still wouldn't retain its correct proportion.

Does anyone know of a way with CSS, or possibly some light js, to use the calc unit while retaining the correct proportion?

The end goal is to have all images within a large (encompassing most of the content on each page) div assigned css to reduce their image size to fit within a mobile device (specifically iphone portrait orientation), without overflowing and causing a horizontal scroll, or other elements which have 100% widths (in order to span the page, such as a banner) to fall short of the full page width.

I suppose using a media query specific to the device width in order to give all images the the max px width after adding up my total margins % paddings would work, but I'd rather use the calc values, if for nothing else, that I'm annoyed I can't use them.

解决方案

If you only want to set one dimension for an image, set the other dimension to auto. The browser will handle the proportions. The following should work for you:

img {
  width: calc(100% - 60px);
  height: auto;
}

这篇关于如何保持图像比例使用calc（width - X）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！