草庐IT

javascript - 图像不再像放在表格单元格布局中那样响应

coder 2023-08-10 原文

我正在尝试使网站上的图像居中。因为我希望它在水平和垂直方向上都居中，所以我使用了如下表格/表格单元格布局:

<div id="mainContainer>
    <div id="horizon">
        <img src="url">
    </div>
</div>

这里 mainContainer ist 设置为 display: table 并且 horizo​​n 设置为 display: table-cell。

不幸的是，图像不再按比例调整大小，因为它成为此结构的一部分。一旦我将它移动到表格/表格单元格 div 中，它就会调整到原来的大小(而不是因为 max-width: 100% 和 max-height: 100 而按比例调整大小%)

参见:http://jsfiddle.net/U8KcN/

编辑:

My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div's dimensions, 2) resizes the image automatically if it is bigger than the div's dimensions (unnecessary to add, it is unknown whether it's width or height is bigger).

来源:OP Comment

最佳答案

每次我听到有人谈论使用表格的弊端，然后看到他们用几乎相同数量的标记(有时更多)用 DIV 创建一个完整的表格结构时，我真的很紧张。

p>

顺便问一下，您是否曾经为想要使用 Wordpress 之类的 CMS 在内容区域中进行一些自己的布局的人开发过网站？几乎没有 HTML 知识的人可以做到这一点的唯一方法是允许他们使用 Tiny MCE 或其他编辑器中的表格工具。所以是的，表格仍然很重要。

最近，我不得不为一位客户做这件事，但表格单元格中的图像没有响应，而且对于较小的屏幕尺寸会缩小。为了解决这个问题，我必须添加到我的 CSS 中的是:

table {

   table-layout: fixed; 

}

现在表格单元格中的图像相应地增长和缩小，并且不再出现水平滚动条。哦，当然你也必须在表格宽度和 td 宽度中使用百分比。

关于javascript - 图像不再像放在表格单元格布局中那样响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17345596/

javascript图像sectiondivthehtmlcss

有关javascript - 图像不再像放在表格单元格布局中那样响应的更多相关文章

  1. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  2. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  3. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  4. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  5. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  6. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  7. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  8. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  9. ruby - 单元测试文件 I/O 方法 - 2

    我对单元测试还是比较陌生。我用Ruby编写了一个类，它接受一个文件，在该文件中搜索给定的Regex模式，替换它，然后将更改保存回文件。我希望能够为此方法编写单元测试，但我不知道我将如何去做。有人能告诉我我们如何对处理文件i/o的方法进行单元测试吗？ 最佳答案 看看这个HowdoIunit-testsavingfiletothedisk?基本上这个想法是一样的，文件系统是你的类的依赖。所以引入一个可以在你的单元测试中模拟的角色/接口(interface)(这样你在单元测试时就没有依赖性)；角色中的方法应该是您从文件系统中需要的所有东西

  10. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

随机推荐