width：calc（）在img上并不相对于父容器 [英] Width: calc() on img is not relative to parent container

问题描述

我目前正在处理一个布局，我必须在图像上使用负边距。这些图像位于< div class =entry-content> 中，它有一个填充。要使< entry-content 中的图像超出填充范围，我使用负边距。在< div class =entry-content> 之外展开图片 width：calc（100％+ margin） code>。

这虽然不像预期的那样工作 - 100％似乎是图像的宽度而不是入门含量。我希望图像的宽度相对于 entry-content ，因为图像将用于响应式布局。

我目前在这个过程中很早，所以我仍然在 body 上有一个固定的宽度。

HTML

 <！ - 其他不相关的代码， - > 
< div class =entry-content> 
< p> 
< img src =http://www.hellothere.se/blog/wp-content/uploads/2014/11/TKD-Promo-title-940x400.jpg/> 
< / p> 
< / div> 
  

CSS

  body {
 width：340px; 
} 
 
 .entry-content {
 padding：0 0.75em; 
职位：亲属; 
} 
 
 .entry-content img {
 display：block; 
保证金：0 -0.75em; 
 width：calc（100％+ 0.75em）; 
} 
  

解决方案

MDN calc（） $ b $ + 和 - 运营商必须始终以空格包围。例如 calc（50％-8px）的操作数将被解析为一个百分比，接着是一个负值长度，一个无效表达式，而 calc（50％ - 8px）是一个百分比，后面跟着一个减号和一个长度。更进一步， calc（8px + -50％）被视为长度，后跟加号和负数百分比。
* 和 / 运算符不需要空白，但为了一致性而添加它是允许的，并且建议。




+ 运算符必须用空格包围。

因此它应该是 width：calc（100％+ 0.75em）而不是 calc（100％ + 0.75em）

body {width：340px;}。entry-content {padding：0 0.75em; position：relative;}。entry-content img {display：block;保证金：0 -0.75em; width：calc（100％+ 0.75em）;}

< div class =entry-content> < p为H. < img src =// placehold.it/200/> < / div>

I'm currently working on a layout where I have to use negative margins on the images. The images are inside <div class="entry-content">, which has a padding. To make the images within entry-content go outside the paddings, I use negative margins. To stretch the image outside the <div class="entry-content"> I used width:calc(100%+margin).

This doesn't work as expected though - the 100% seems to be the image's width rather than the width of entry-content. I want the image's width to be relative to entry-content, as the image will be used in a responsive layout.

I'm currently very early in the process, so I still have a fixed width on body.

HTML

<!-- other unrelated code such as header-->
<div class="entry-content">
    <p>
        <img src="http://www.hellothere.se/blog/wp-content/uploads/2014/11/TKD-Promo-title-940x400.jpg" />
    </p>
</div>

CSS

body {
  width: 340px;
}

.entry-content{
  padding: 0 0.75em;
  position: relative;
}

.entry-content img {
  display: block;
  margin: 0 -0.75em;
  width: calc(100%+0.75em);
}

解决方案

MDN calc():

The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

The + operator must be surrounded by whitespace.

Therefore it should be width: calc(100% + 0.75em) rather than calc(100%+0.75em)

body {
    width:340px;
}
.entry-content {
    padding: 0 0.75em;
    position:relative;
}
.entry-content img {
    display:block;
    margin: 0 -0.75em;
    width: calc(100% + 0.75em);
}

<div class="entry-content">
    <p>
        <img src="//placehold.it/200" />
    </p>
</div>

这篇关于width：calc（）在img上并不相对于父容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！