#html #css #canvas
#HTML #css #холст
Вопрос:
https://jsfiddle.net/awguo/uw1x8m3y/
вот подробная демонстрация.
Я помещаю img в оболочку div #, а затем накладываю перекрытие холста на этот img внутри этой оболочки. Я установил ширину и высоту img и css на 100%. Затем я отслеживаю ширину * высоту холста. Это не так, как ожидалось (350×350), а 350×354. Почему «4px» больше? Что я должен сделать, чтобы размер холста был точно таким же, как у изображения (которое также может быть растянуто в соответствии с шириной родительского div?
Спасибо!
$(function() {
// Why it's 350x354, not 350x350?
var output = 'canvas size: ' ($('#overlap').css('width') ' x ' $('#overlap').css('height'));
$('#output').val(output);
}); #wrapper {
position: relative;
width: 350px;
}
#wrapper img {
width: 100%;
}
#overlap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
#output {
width: 350px
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<img src="http://www.awflasher.com/300x300_demo.png" />
<canvas id="overlap"></canvas>
</div>
<h3>
Output:
</h3>
<input id="output" type="text" />
<p>
Why the output is 350x354, not 350x350 as expected?
</p> Ответ №1:
Сделайте отображение изображения inline-block или block . По умолчанию это inline и vertical-align baseline редактируется, поэтому он получает дополнительную сумасшедшую 0.5em высоту.
$(function() {
// Why it's 350x354, not 350x350?
var output = 'canvas size: ' ($('#overlap').css('width') ' x ' $('#overlap').css('height'));
$('#output').val(output);
}); #wrapper {
position: relative;
width: 350px;
}
#wrapper img {
width: 100%;
display: block;
}
#overlap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
}
#output {
width: 350px
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<img src="http://www.awflasher.com/300x300_demo.png" />
<canvas id="overlap"></canvas>
</div>
<h3>
Output:
</h3>
<input id="output" type="text" />
<p>
Why the output is 350x354, not 350x350 as expected?
</p> 
Комментарии:
1. Боже, этот ответ такой быстрый. Спасибо, ребята, я попробую!
2. Я думаю, вы имели в виду
inline,baselineне является допустимым значением дляdisplay3. @Kaiido я имел в виду
vertical-alignзначение. Извините за путаницу.4. Довольно запутанный, да. Тогда нет необходимости в блоке отображения, достаточно просто установить
vertical-align:topна img.5. @Kaiido Верно… Это другой способ.