如何在div中仅显示水平滚动条.我有条形图像,我想只为它们显示水平滚动条.我不希望显示垂直滚动条.请帮忙...
这是我的HTML
<div id="containersimg">
<div id="wrapper">
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
</div>
</div>
这是我的CSS
#wrapper {
width: auto;
height: 130px;
}
#containersimg {
background-color: #bbb;
width: 300px;
height: 130px;
overflow-x: scroll;
}
img {
float: left;
clear: none;
margin: 5px;
}
我创造了一个小提琴,以展示我想要实现的目标
编辑1:
我能想到的唯一方法是通过向wrapperdiv 添加宽度,我不能这样做因为图像的数量和宽度是动态的
我有一个调整大小的图像（宽度=“100”）和一个 jquery 脚本，用于在单击该图像时输出当前坐标。
<img id="image" src="http://localhost/image.jpg" width="100" >
<script>
$('#image').mousemove( function(event) {
window.current_x = Math.round(event.pageX - $('#image').offset().left) ;
window.current_y = Math.round(event.pageY - $('#image').offset().top);
window.current_coords = window.current_x + ', ' + window.current_y;
$('#edit_instants_now').html('Current position: ' + window.current_coords + '.');
}).mouseleave( function() {
$('#edit_instants_now').html(' ');
}).click( function() {
$('#edit_instants_click').html('Last click: ' + window.current_coords + '. ');
document.edit_instant.edit_instant_x.value = window.current_x;
document.edit_instant.edit_instant_y.value = window.current_y;
});
</script>
问题是我想获得原始图像的实际坐标，而不是调整大小的坐标。
你有什么建议吗？谢谢。
我想读出for循环中url指定的图像的宽度(orgWidth),计算高度为480px的新宽度(calcWidth).
for (var i=1; i <= item.length; i++) {
url = document.images[i].rsc;
orgWidth = some-fancy-thing-that-reads-the-width;
orgHeight = some-fancy-thing-that-reads-the-height;
factor = orgHeight / 480 // 1400 / 480 = 2.916
calcWidth = orgWidth / factor // 1000 / 2.916 = 342.935
document.images[i].width = calcWidth;
}
我想知道如果渲染图像具有反应风格时如何获取图像的高度和宽度，因此如果宽度大于高度，可以将其翻转为纵向模式。
示例：https：//codesandbox.io/s/k9kwv0kp93
示例代码：
index.js
import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
const styles = {
fontFamily: 'sans-serif',
textAlign: 'center',
};
const App = () => (
<div style={styles}>
<Hello name="CodeSandbox" />
<h2>Start editing to see some magic happen {'\u2728'}</h2>
</div>
);
render(<App />, document.getElementById('root'));
Hello.js
import React, {Component} from 'react';
export default class Hello extends Component
{
constructor()
{
super();
this.state = {img: null}
this.get_image = this.get_image.bind(this);
}
get_image()
{ …我有一个背景图像的DIV.但我的要求是如何根据背景图像的高度和宽度扩展DIV大小.我已经在这个链接的帮助下尝试了一些代码.
var src = $('#divID').css('background-image').
replace('url', '')
.replace('(', '')
.replace(')', '')
.replace('"', '')
.replace('"', '');
$('body').append('<img id="appendedImg" src="' + src + '" style="height:0px;width:0px"');
var img = document.getElementById('appendedImg');
var width = img.clientWidth;
var height = img.clientHeight;
$('#appendedImg').detach();
我正在寻找任何优雅的解决方案,如果可能的话.
我使用javascript获取图像大小,但在我第二次运行之前它不会返回正确的大小.我想知道为什么会这样.这是我的代码:
var img = new Image()
img.src = src
img.onLoad = alert(img.width);
这0有时会返回,但几次后它会返回实际的图像宽度.如何让它第一次获得合适的尺寸？我认为这是正确的方法.
没关系,我用oldschool方式计算元素.
我在主div里面有几个div.现在顶部的div有一个设定的宽度,但由于其中的内容,它的内部宽度不同.所以如果我没弄错的话,我需要innerWidth.无论如何,在这种情况下,它需要产生600的宽度.
我不是在使用jquery而是jqui,所以我想在javascript单独看jqui没有内/外宽带功能.这确实意味着我有一个$选择器可以玩.
<style>
.holder {
width:100%; /* which in this case is 320px */
overflow-x: auto;
overflow-y:hidden;
}
.menu_item {
width:200px;
float:left;
}
</style>
<div class="holder" onscroll="get_width(this)">
<div class="menu_item">
item1
</div>
<div class="menu_item">
item2
</div>
<div class="menu_item">
item3
</div>
</div>
get_width(that) {
alert(that.innerWidth); // returns undefined
alert(that.width); // returns undefined
}
我有多个图像,想要找出每个图像是水平还是垂直,并添加一个类,所以我可以相应地设置它.
我尝试了很多东西,包括这样的东西:
if ($(".img").width() > $(".img").height()) {
$(this).addClass("horizontal");
}
我究竟做错了什么？谢谢!
我试图通过使用以下代码获取我的图像宽度和高度,但我收到的所有内容都是未定义的.
任何人都可以向我解释这项工作如何？
<script>
var img = new Image();
img = document.getElementById("top");
alert(this.width + 'x' + this.height);
</script>
<body>
<div id="ad">
<div id="banner">
<img class="top" id="top" src="frame_2.jpg"/>
</div>
</div>
</body>
我需要在上传之前检查图像的尺寸.我在javascript中创建了一个函数进行验证,如下所示
$('#destSubmit').click(function() {
var img = document.getElementById('destImage');
var width = img.naturalWidth ;
var height = img.naturalHeight ;
console.log('width : ' + width + '|| Height : ' + height);
if(height != 100 || width != 100){
alert(error);
}
}
但它显示宽度和高度为undefined;
我知道这是一个重复的问题,但经过长时间的研究后我找不到解决方案.试过这里列出的解决方案如何使用JavaScript获取图像大小(高度和宽度)？,但没用.