使用 html 输出标签时有没有办法控制图像的大小?
Is there a way to control the size of an image when using html output tag?
我正在使用以下代码上传图像以供查看,然后再将其传递到我的服务器。我想使用 css 来限制图像的大小。 CSS 对图像没有影响,因为它是由输出渲染的。有没有解决的办法?我尝试将 CSS 属性添加到其周围的 div 中,但这也不起作用。
HTML:
<input type="file" id="files" name="files[]" file-model="myFile"/>
<output id="list" class="resize-image" alt="Image"></output>
CSS:
#list{
max-width: 15px;
max-height: 7px;
}
Javascript:
var handleFileSelect = function (evt) {//already set up for multiple files; not what i want to do.
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
最简单的方法是使用 height
和 width
img
标签属性。
var span = document.createElement('span');
span.innerHTML = ['<img height="7" width="15" class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
如果您真的想使用 .css
完成此任务,您可以使用 background-size
,但是 background
属性 必须设置为 url到 css
.
中的图像
您也可以像这样简单地覆盖 css
中的 img
标签:
img{
max-width: 100px;
max-height: 100px;
}
在这里你可以测试这两种方法:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size
我正在使用以下代码上传图像以供查看,然后再将其传递到我的服务器。我想使用 css 来限制图像的大小。 CSS 对图像没有影响,因为它是由输出渲染的。有没有解决的办法?我尝试将 CSS 属性添加到其周围的 div 中,但这也不起作用。
HTML:
<input type="file" id="files" name="files[]" file-model="myFile"/>
<output id="list" class="resize-image" alt="Image"></output>
CSS:
#list{
max-width: 15px;
max-height: 7px;
}
Javascript:
var handleFileSelect = function (evt) {//already set up for multiple files; not what i want to do.
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
最简单的方法是使用 height
和 width
img
标签属性。
var span = document.createElement('span');
span.innerHTML = ['<img height="7" width="15" class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
如果您真的想使用 .css
完成此任务,您可以使用 background-size
,但是 background
属性 必须设置为 url到 css
.
您也可以像这样简单地覆盖 css
中的 img
标签:
img{
max-width: 100px;
max-height: 100px;
}
在这里你可以测试这两种方法:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size