javascript - 响应图像的垂直填充

coder 2025-01-21 原文

这个CSS:

.outer-img-wrap {
    border: 2px solid gray;
    margin: 1vw auto;
    max-width: 192px;
    text-align: center;
    overflow: hidden;
}
.outer-img-wrap img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    vertical-align: middle;
}
.inner-img-wrap {
    background: #000;
    border: thin solid #ff9900;
    margin: 2px;
}

应用于此 HTML:

<td style="width: 25%">
    <div class="outer-img-wrap">
        <div class="inner-img-wrap">
            <img src="http://placehold.it/64x64" />
        </div>
    </div>
</td>

在适当宽度的表格单元格中生成居中响应图像。所有图像最终都具有相同的宽度，这就是我想要的。

我还希望图像以响应方式具有相同的高度。所以我将此 Javascript 添加到页面以更新填充。

function resizeImageElements()
{
    var imageElements = $(".outer-img-wrap .inner-img-wrap img");
    var imageElementsMaxHeight = -1;
    imageElements.map( function(index) {
        // compare the height of the img element
        if( $(this).height() > imageElementsMaxHeight ) {
            imageElementsMaxHeight = $(this).height();
        }
    } );

    imageElements.map( function(index) {
        var computeTopBottomPadding = ( imageElementsMaxHeight - $(this).height() ) / 2;
        $(this).css( {
            "padding-top": computeTopBottomPadding,
            "padding-bottom": computeTopBottomPadding,
        } );
    } );
}

resizeImageElements();

问题是:我可以不用Javascript代码实现同样的效果吗？只使用 CSS？

Fiddle 在 http://jsfiddle.net/ybkgLq4d/

最佳答案

嗯，不清楚您是从哪里拍摄这些图像的。如果您能够在后端服务器中处理这些图像(比如使用 PHP、Python 或 ruby)，您始终可以使用固定比例创建它们的版本，这样它们在前端调整大小时将具有相同的尺寸.这将是我最喜欢的选择。

如果您不能或不想创建不同版本的图像，我相信您最好的选择是使用带有背景图像的元素而不是图像元素本身，并使用 background-size 来适应您的需求。

例如:

.outer-img-wrap {
    border: 2px solid gray;
    margin: 1vw auto;
    max-width: 192px;
    text-align: center;
    overflow: hidden;
}
.outer-img-wrap .img {
    display:inline-block;
    position:relative;
    vertical-align: middle;
    width:100%;
    background-position:center center;
    height:50px; /* or whatever height you want, you could use % value too relative to it's parent element */

    /* cross browser */
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
}
.inner-img-wrap {
    background: #000;
    border: thin solid #ff9900;
    margin: 2px;
}

应用于此 html:

<td style="width: 25%">
    <div class="outer-img-wrap">
        <div class="inner-img-wrap">
            <div class="img" style="background-image:url(http://placehold.it/64x64)"></div>
        </div>
    </div>
</td>

fiddle :https://jsfiddle.net/ybkgLq4d/14/

关于javascript - 响应图像的垂直填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31281098/

javascript 响应 background strong img css

有关javascript - 响应图像的垂直填充的更多相关文章

ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby 中生成它们？ - 2
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
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
ruby - 匹配大写字母并用后续字母填充，直到一定的字符串长度 - 2
我有一个驼峰式字符串，例如:JustAString。我想按照以下规则形成长度为4的字符串:抓取所有大写字母；如果超过4个大写字母，只保留前4个；如果少于4个大写字母，则将最后大写字母后的字母大写并添加字母，直到长度变为4。以下是可能发生的3种情况:ThisIsMyString将产生TIMS(大写字母)；ThisIsOneVeryLongString将产生TIOV(前4个大写字母)；MyString将生成MSTR(大写字母+tr大写)。我设法用这个片段解决了前两种情况:str.scan(/[A-Z]/).first(4).join但是，我不太确定如何最好地修改上面的代码片段以处理最后一种
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
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
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
ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2
在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.
ruby - 在 Ruby 中，垂直线是什么？ - 2
1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？最佳答案它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru
ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2
有这样的事吗？我想在Ruby程序中使用它。最佳答案试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/
ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2
我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

javascript - 响应图像的垂直填充

有关javascript - 响应图像的垂直填充的更多相关文章

随机推荐